Angular exported component from module not useable in another module

Question

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?

TestModule should import module that is exporting Calendar component — yurzui, Sep 23 '17 at 16:21
you can read [Avoiding common confusions with modules in Angular](https://blog.angularindepth.com/avoiding-common-confusions-with-modules-in-angular-ada070e6891f) — Max Koretskyi, Sep 24 '17 at 05:40
@yurzui AppModule imports TestModule already so TestModule can not import AppModule since that would be a circular dependency or am I wrong? — user3740359, Sep 24 '17 at 09:27
You should import the module of calendarComponent in tour page's module — arpho, Jul 07 '19 at 06:06

score 12 · Accepted Answer · edited Sep 23 '19 at 08:01

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

Angular 2 Use component from another module

Angular exported component from module not useable in another module

1 Answers1

Linked