„‚Wizard‘ist kein bekanntes Element“ Fehler, auch wenn diese Komponente importieren

Question

I Angular 2.4 und bin immer den folgenden Fehler in meinem Browser-Konsole bin mit:

Unhandle Versprechen Ablehnung: Template analysieren Fehler : 'wizard' ist kein bekanntes Element: 1. Wenn 'wizard' eine Winkelkomponente ist, vergewissern Sie sich, dass sie Teil dieses Moduls ist. 2. Wenn 'Wizard' eine Web-Komponente ist, fügen Sie 'CUSTOM_ELEMENTS_SCHEMA' den '@ NgModule.schemas' dieser Komponente hinzu, um diese Nachricht zu unterdrücken. ("oduktion-Tour" class = "continue-Tour" Daten-Toggle = "modal"> Weiter Tour- [ERROR ->]

„): SellingComponent @ 79: 8; Zone:, Aufgabe : Promise.then; Wert:

Dies ist die Art von Fehler, die ich in der Regel, wenn ich eine Komponente in meiner app.module Datei importieren vergessen, aber ich habe diese Zeit nicht vergessen

hier. ist mein app.module.ts Datei:

import { WizardComponent } from './wizard.component'; 
import { WizardService } from './wizard.service'; 

@NgModule({ 
    imports: [ 
     ...   
     SellingModule, 
     GrowingModule, 
    ], 
    declarations: [ 
     ... 
     WizardComponent, 
    ], 
    providers: [   
     ... 
     WizardService   
    ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { } 

growing.module.ts:

@NgModule({ 
    ... 
    declarations: [ 
     GrowingComponent, 
     ... 
    ], 
    ... 
}) 
export class GrowingModule { } 

selling.module.ts:

@NgModule({ 
    ... 
    declarations: [ 
     SellingComponent, 
     ... 
    ], 
    ... 
}) 
export class SellingModule { } 

growing.component.html

<wizard></wizard> 

selling.component.html

<wizard></wizard> 

wizard.component.ts

@Component({ 
    moduleId: module.id, 
    selector: 'wizard', 
    templateUrl: 'wizard.component.html', 
}) 

Wie Sie sehen können, bin ich versucht <wizard></wizard> in zwei verschiedenen Komponenten zu verwenden. Ich habe versucht, meine WizardComponent in meinem GrowingModule und SellingModule statt in meinem AppModule zu importieren, aber beim Import habe ich einen anderen Fehler bekommen, weshalb ich dachte, ich müsste es nur einmal in mein AppModule importieren. Wenn ich nur <wizard></wizard> in growing.component.html und dann nur WizardComponent in GrowingModule importieren, funktioniert es. Was muss ich tun, um <wizard></wizard> in beiden Komponenten verwenden zu können?

Answer 1

Wenn Sie eine gemeinsame Komponente in mehreren Feature-Modulen (d. H. Selling- und Growing-Module) wiederverwenden möchten, sollten Sie diese Komponenten lieber in einem gemeinsam genutzten Modul als in AppModule definieren.

Dann können Sie die SharedModule wo erforderlich in Ihre Feature-Module importieren.

Siehe this Antwort, und die Angular shared module Dokumentation.