Search code examples
angularangular-componentsangular-module

Angular exported component from module not useable in another module

I am exporting a custom component in my AppModule but can not use it in another module, which is being imported in the AppModule. I thought exported components are visible globally?

I am trying to use the CalendarComponent with the selector 'app-calendar' in a component within the TestModule.

app.module.ts

@NgModule({
  declarations: [ ... ,
    CalendarComponent,
  ],
  imports: [ ... ,
    TestModule,
  ],
  exports: [ ...
    CalendarComponent,
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})

test.module.ts

@NgModule({
  declarations: [ ... ,
    TestComponent
  ],
  imports: [ ... ],
  exports: [ ... ],
  providers: [ ... ]
})

test.component.html

<app-calendar></app-calendar>

Console throws the error that 'app-calendar' is not a known element (not part of the module)

What am I missing?

Solution

  • Create CalendarModule or add Calendar component to your share module(depends on your architecture) like:

    calendar.module.ts 

    @NgModule({
  declarations: [CalendarComponent],
  exports: [CalendarComponent]
})
export class CalendarModule {}

    In AppModule remove CalendarComponent everywhere and import CalendarModule(or SharedModule) if some of declarations uses CalendarComponent

    app.module.ts

    @NgModule({
  declarations: [ ... ,
    CalendarComponent,  <== remove it
  ],
  imports: [
    TestModule,
    // import CalendarModule here if any of declarations above use CalendarComponent in their template
  ],
  exports: [ ...
    CalendarComponent,  // remove it
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

    test.module.ts

    @NgModule({
  declarations: [ ... ,
    TestComponent
  ],
  imports: [ 
    CalendarModule <=== add this, so TestComponent will be able to use CalenderComponent in its template
  ]
})
export class TestModule {}

    For more details see