Angular2 RC6 Eltern Kind Komponenten

Question

Ich habe bei den anderen Angular2 RC6 Eltern-Kind-Beiträge gesucht, aber keiner von ihnen lösen das Problem das ich habe.

Ich habe meine Haupt AppModule bekam, die eine HomeModule importiert. Das scheint zu funktionieren. Jetzt habe ich hinzugefügt, um eine mapModule die angular2-Google-Maps als Import in meine HomeModule implementiert und ich erhalte die Fehlermeldung:

'google-map' is not a known element: 
1. If 'google-map' is an Angular component, then verify that it is part of this module. 
2. If 'google-map' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<h1>home</h1>[ERROR ->]<google-map></google-map>"): HomeComponent@0:13 

Hier ist mein Setup:

// ---------- 
// AppModule 
// ---------- 
@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ReactiveFormsModule, 
     HttpModule, 
     HomeModule, 
     routing 
    ], 
    declarations: [ 
     AppComponent, 
    ], 
    // schemas: [CUSTOM_ELEMENTS_SCHEMA], 
    providers: [ 
     {provide: APP_BASE_HREF, useValue : '/' }, 
     {provide: LocationStrategy, useClass: HashLocationStrategy} 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

// ---------- 
// HomeModule 
// ---------- 
@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ReactiveFormsModule, 
     HttpModule, 
     MapModule, 
    ], 
    declarations: [ 
     HomeComponent 
    ], 
    bootstrap: [HomeComponent] 
}) 
export class HomeModule {} 

// ---------- 
// HomeComponent 
// ---------- 
@Component({ 
    selector: 'home', 
    template: "<h1>home</h1><google-map></google-map>", 
    styleUrls: ['home.scss'], 
}) 
export class HomeComponent {} 

// ---------- 
// MapModule 
// ---------- 
@NgModule({ 
    imports: [ 
     BrowserModule, 
     CommonModule, 
     FormsModule, 
     AgmCoreModule.forRoot({ 
      apiKey: '<my-api-key>' 
     }) 
    ], 
    declarations: [MapComponent], 
    providers: [MapService], 
    bootstrap: [MapComponent] 
}) 
export class MapModule {} 

// ---------- 
// Map Component 
// ---------- 
@Component({ 
    selector: 'google-map', 
    templateUrl: 'map.component.html', 
    styleUrls: ['map.scss'] 
}) 
export class MapComponent {} 

Zugabe CUSTOM_ELEMENTS_SCHEMA auf die Modul beseitigt den Fehler, aber die Karte wird nicht gerendert.

Wenn ich den mapModule Teil des AppModule direkt statt wie ein Kind auf die HomeModule machen dann sehe ich die Karte.

Irgendwelche Hinweise?

---

**** bearbeiten ****

---

Vielen Dank für die bisher Kommentare. Mein Code sieht jetzt sauberer aus. Ich habe die folgenden Änderungen basierend auf Kommentaren angewendet, aber der Fehler bleibt derselbe. Mein neuer Code sieht wie folgt aus.

// ---------- 
// AppModule 
// ---------- 
@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ReactiveFormsModule, 
     HttpModule, 
     HomeModule, 
     routing 
    ], 
    declarations: [ 
     AppComponent, 
    ], 
    // schemas: [CUSTOM_ELEMENTS_SCHEMA], 
    providers: [ 
     {provide: APP_BASE_HREF, useValue : '/' }, 
     {provide: LocationStrategy, useClass: HashLocationStrategy} 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

// ---------- 
// HomeModule 
// ---------- 
@NgModule({ 
    imports: [ 
     CommonModule, 
     MapModule, 
    ], 
    declarations: [ 
     HomeComponent 
    ] 
}) 
export class HomeModule {} 

// ---------- 
// HomeComponent 
// ---------- 
@Component({ 
    selector: 'home', 
    template: "<h1>home</h1><google-map></google-map>", 
    styleUrls: ['home.scss'], 
}) 
export class HomeComponent {} 

// ---------- 
// MapModule 
// ---------- 
@NgModule({ 
    imports: [ 
     CommonModule, 
     AgmCoreModule.forRoot({ 
      apiKey: '<my-api-key>' 
     }) 
    ], 
    declarations: [MapComponent], 
    providers: [MapService] 
}) 
export class MapModule {} 

// ---------- 
// Map Component 
// ---------- 
@Component({ 
    selector: 'google-map', 
    templateUrl: 'map.component.html', 
    styleUrls: ['map.scss'] 
}) 
export class MapComponent {} 

Zusätzlich überprüfte ich den Link zur anderen Stack-Überlauf Ausgabe zur Verfügung gestellt, und ich bemerkte sie in ihrem Beispiel ein Eltern-Kind-Beispiel hatte aber das Kind ein Modul nicht an sie gebunden hat. Die MapComponent in meinem Beispiel ist ziemlich komplex mit Verbindungen zum angular2-google-map-Modul und scheint so zu sein, als müsste es ein eigenes Modul haben, um das zu handhaben.

---

** Edit 2 **

---

Ich habe einen Plunker Beitrag hinzugefügt, mein Problem zu replizieren. http://plnkr.co/edit/7M71N6ttYR2s9yNdB3UT?p=preview

Answer 1

ich die Lösung für mein Problem gefunden Ich musste die Exporte zu meinem MapModule hinzufügen, damit andere Komponenten die Komponente verwenden können.Meine letzte Änderung war mapModule wie folgt

// ---------- 
// MapModule 
// ---------- 
@NgModule({ 
    imports: [ 
     CommonModule, 
     AgmCoreModule.forRoot({ 
      apiKey: '<my-api-key>' 
     }) 
    ], 
    declarations: [MapComponent], 
    exports: [MapComponent], 
    providers: [MapService] 
}) 
export class MapModule {} 

Exporte: [MapComponent]

Answer 2

Beachten Sie, dass nur die app.moduleBrowserModule importieren sollte und eine bootstrap Eigenschaft. Können Sie diese aus den Modulen entfernen und sehen, ob das geholfen hat? Halten Sie den Import von CommonModule wie in Ihrem MapModule für alle nicht app.module Module.

Auch keine Notwendigkeit für doppelte Importe von FormsModule, HttpModule und ReactiveFormsModule. Es ist ausreichend, dass die app.module sie importiert.

p.s. sorry für die Kommentierung und dann zu beantworten, ich habe einen seltsamen Fehler in Chrom in dem Antwortfeld, das den Kopfbereich aus irgendeinem Grunde verursacht selbst über die Box zu duplizieren :(