Angular 10: How to export multiple components in a module

Question

I am using Angular 10 version. There are some similar questions but they didn't solve my problem.

In my Angular project , I have made two modules named post and static. The post module have 10 components. and i want use all these components in app.component.html.

what i have tried

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PostRoutingModule } from './post-routing.module';
import { ServiceofferedComponent } from './serviceoffered/serviceoffered.component';
import { FeaturesComponent } from './features/features.component';
import { WorksampleComponent } from './worksample/worksample.component';
import { PricingComponent } from './pricing/pricing.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { ChooseserviceComponent } from './chooseservice/chooseservice.component';
import { DisplayresultComponent } from './displayresult/displayresult.component';
import { HeaderComponent } from './header/header.component';
import { BannerComponent } from './banner/banner.component';






@NgModule({
  declarations: [ ServiceofferedComponent, FeaturesComponent, WorksampleComponent, PricingComponent, LoginComponent, SignupComponent, ChooseserviceComponent, DisplayresultComponent, HeaderComponent, BannerComponent],
  imports: [
    CommonModule,
    PostRoutingModule
  ],
  exports:[HeaderComponent],
  exports:[BannerComponent],


  
  
})
export class PostModule { }

I have try to use exports:[BannerComponent],. the first export is ok. it oesn't show any errors but for the second one it shows error. i have many more components how i will export and without export i can't use in app.component.html

Error i have got

   
    ERROR in src/app/post/post.module.ts:28:3 - error TS1117: An object literal cannot have multiple properties with the same name in strict mode.
    
    28   exports:[BannerComponent],
         ~~~~~~~
    src/app/post/post.module.ts:28:3 - error TS2300: Duplicate identifier 'exports'.
    
    28   exports:[BannerComponent],

Thankyou

score 1 · Accepted Answer · answered Aug 01 '20 at 17:04

1

Hy Rahul

  exports: [
        HeaderComponent,
        BannerComponent,
    ],

Only write once time, for module that you have to export. I hope it has been helpful

answered Aug 01 '20 at 17:04

ProgramaClases

90
1
8

score 0 · Answer 2 · answered Aug 01 '20 at 17:04

To export multiple components, you should include in the exports array

    ...
    @NgModule({
              declarations: [ ServiceofferedComponent, FeaturesComponent, WorksampleComponent, PricingComponent, LoginComponent, SignupComponent, ChooseserviceComponent, DisplayresultComponent, HeaderComponent, BannerComponent],
              imports: [
                CommonModule,
                PostRoutingModule
              ],
              exports:[HeaderComponent, BannerComponent],
        })
    ...

You must think of the {} inside the @NgModule() as an object. An object cannot have two properties with the same name. The same concept is applied when thinking about the object inside the @NgModule().

Jobelle · Answer 3 · 2020-08-01T17:10:29.880

0

You need only one exports attribute and add all the components that needs to export in that array

exports:[HeaderComponent, BannerComponent]

edited Aug 01 '20 at 17:10

answered Aug 01 '20 at 17:05

Jobelle

2,717
1
15
26

Angular 10: How to export multiple components in a module

3 Answers3