Angular 2未處理的Promise拒絕：模板解析錯誤：'app-main'不是已知的元素：

Question

我有兩個單獨的模塊app.module.ts和core.module.ts用於加載兩個選擇器app和app-main。

的文件夾結構是象下面這樣：

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

我得到的'app-main' is not a known element:問題，如下圖： 當我改變選擇器爲app-main它的工作原理，但沒有任何錯誤和輸出。只是返回一個空白頁面。

我該如何使用選擇器呈現app.component.ts中不同模塊的模板？或者在單個模板中加載來自不同模塊的不同模板？

Answer 1

你需要列出應在導入模塊可在exports組件：

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