角2未処理プロミス拒否：テンプレート解析エラー： 'app-main'は既知の要素ではありません：

Question

2つのセレクタをロードするためのapp.module.tsとcore.module.tsの2つのモジュールがあります。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に別のモジュールのテンプレートをレンダリングするにはどうすればよいですか？または、1つのテンプレート内の異なるモジュールから異なるテンプレートを読み込むことはできますか？あなたはモジュールをインポートして利用可能であるべきexportsのコンポーネントリストする必要が

Answer 1

：

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