Angular2 ngModule split causes error

Question

I have split my app.module.ts into multiple modules, however this is causing an error that I can't solve. I get the error:

Template parse errors: 'generic-titlepagebar' is not a known element

These are my modules which use generic-titlepagebar.

app.modules.ts:

 @NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    BrowserAnimationsModule,
    MdNativeDateModule,
    Md2Module,
    ResponsiveModule,
    DataTableModule,
    GridsterModule,
    NgbDropdownModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyD2lf1s8D8vkzHKxDWfkHqGAGsGLAWlNvw'
    }),
    CustomComponentsModule,
    GenericComponentsModule,
    ViewModule,
    ServiceModule,
    RouterModule.forRoot(appRoutes),
  ],
  providers: [
    {
      provide: Http,
      useFactory: httpFactory,
      deps: [XHRBackend, RequestOptions]
    }
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

And generic-component.module.ts

    @NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    BrowserAnimationsModule,
    RouterModule,
    MdNativeDateModule,
    Md2Module,
    ResponsiveModule,
    DataTableModule,
    GridsterModule,
    NgbDropdownModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyD2lf1s8D8vkzHKxDWfkHqGAGsGLAWlNvw'
    })
  ],
  declarations: [
    BackButtonComponent,
    DynamicFormComponent,
    DynamicFormQuestionComponent,
    DynamicLoaderComponent,
    GenericCardComponent,
    GenericConfigComponent,
    GenericListComponent,
    GenericProjectSwitcherComponent,
    GenericSearchComponent,
    MapsComponent,
    TableComponent,
    TableDetailsComponent,
    TabsbarComponent,
    TitlePageBarComponent,
    MenuComponent
  ],
  entryComponents: [
    GenericListComponent,
    DynamicFormComponent,
    GenericCardComponent,
    GenericSearchComponent,
    TableComponent
  ]
})
export class GenericComponentsModule {}

score 0 · Answer 1 · answered Aug 24 '17 at 12:31

0

If you have a component with the selector 'generic-titlepagebar' in your generic-component.module, you need to add this component in the exports section of your @NgModule declaration of your generic-component.module. Then you can use the tag <generic-titlepagebar> in a template of one of your components in app.module .

answered Aug 24 '17 at 12:31

Yakov Fain

11,972
5
33
38

I have tried adding it as: exports:[GenericComponentsModule], but the Module is already exported as export class GenericComponentsModule {} – viddrawings Aug 24 '17 at 12:38
You need to put the component that has selector:'generic-titlepagebar' (not the module) in the exports – Yakov Fain Aug 24 '17 at 12:46

Angular2 ngModule split causes error

1 Answers1