Angular 2 Unhandled Promise rejection: Template parse errors: 'app-main' is not a known element:

Question

I have two separate modules app.module.ts and core.module.ts for loading two selectors app and app-main.

The folder structure is like below:

|main.ts
|-App
|  |-app.module.ts
|  |-Components
|    |-app.component.ts
|
|-Core
|  |-core.module.ts
|  |-Components
|    |-core.component.ts

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './App/app.module';
if (process.env.ENV === 'production') {
    enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CoreModule } from '../Core/core.module';
import { AppComponent } from './Components/app.component';
@NgModule({
    imports: [
        BrowserModule,
        CoreModule
    ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'app',
    template: `<app-main></app-main>`
})
export class AppComponent {}

core.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoreComponent } from './Components/core.component';
@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [ CoreComponent ]
})
export class CoreModule {}

core.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'app-main',
    template: ` App Loaded From Core`
})
export class CoreComponent {}

I am getting the issue of 'app-main' is not a known element: as in below image: When i change the selector to app-main it works but there is no any errors and output. Just a blank page is returned.

How could i render the template of different module in the app.component.ts using the selector? Or load different templates from different modules in a single template?

@yurzui yeah just forgot about that. Thanks for the reminder. +1 — PaladiN, Nov 18 '16 at 08:18

score 5 · Accepted Answer · answered Nov 18 '16 at 08:11

5

You need to list the components in exports that should be available in importing modules:

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [ CoreComponent ],
    exports: [ CoreComponent ] // <<<< added
})
export class CoreModule {}

answered Nov 18 '16 at 08:11

Günter Zöchbauer

623,577
216
2,003
1,567

Angular 2 Unhandled Promise rejection: Template parse errors: 'app-main' is not a known element:

1 Answers1