Angular2 RC6 Parent Child Components

Question

I've looked at the other Angular2 RC6 parent child posts but none of them solve the issue I am having.

I've got my main AppModule that imports a HomeModule. That seems to work. Now I've added a MapModule that implements angular2-google-maps as an import into my HomeModule and I am getting the error:

'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

Here is my 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 {}

adding CUSTOM_ELEMENTS_SCHEMA to the module get's rid of the error but the map doesn't render.

If I make the MapModule part of the AppModule directly instead of as a child to the HomeModule then I see the map.

Any clues?

---

****Edit****

---

Thanks for the comments so far. My code looks cleaner now. I've applied the following changes based on comments but the error remains the same. My new code looks like the following.

// ----------
// 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 {}

Additionally I checked out the link provided to the other Stack Overflow issue and I noticed they had a parent-child example but in their example the child did not have a module tied to it. The MapComponent in my example is pretty complex with ties to the angular2-google-map module and seems like it should have it's own module to handle that.

---

** Edit 2 **

---

I've added a plunker post to replicate my problem. http://plnkr.co/edit/7M71N6ttYR2s9yNdB3UT?p=preview

Answer 1

Note that only the app.module should import BrowserModule and have a bootstrap property. Can you remove those from the modules and see if that helped? Keep importing CommonModule as you did in your MapModule for all non app.module modules.

Also, no need for duplicate imports of FormsModule , HttpModule and ReactiveFormsModule . It's suffice that the app.module imports them.

ps sorry for commenting and then answering, I have a strange bug in chrome in the answer box that for some reason causes the header pane to duplicate itself over the box :(

Answer 2

I found the solution to my issue. I needed to add the exports to my MapModule so that other components could use the component. My final change was to MapModule as follows

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

exports: [MapComponent]