Composant exporté angulaire du module non utilisable dans un autre module

Question

J'exporte un composant personnalisé dans mon AppModule mais je ne peux pas l'utiliser dans un autre module importé dans AppModule. Je pensais que les composants exportés sont visibles globalement?

J'essaie d'utiliser le CalendarComponent avec le sélecteur 'app-calendar' dans un composant du 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 jette l'erreur 'app-calendrier' n'est pas un élément connu (ne fait pas partie du module)

Qu'est-ce qui me manque?

Answer 1

Créer CalendarModule ou ajouter Calendar composant à votre module de partage (dépend de votre architecture) comme:

calendar.module.ts

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

Dans AppModule éliminent CalendarComponent partout et l'importation CalendarModule (ou SharedModule) si certaines déclarations utilisent 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 {} 

Pour plus de détails, voir

• Angular 2 Use component from another module