Angular 2未处理的承诺拒绝：模板解析错误：'；主应用程序&x27；不是已知元素：

我有两个独立的模块

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);

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

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

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

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

应用程序模块.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);

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

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

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

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

应用程序组件.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);

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

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

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

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

核心组件.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);

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

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

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

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

我收到的问题是，

“app-main”不是一个已知元素：

如下图所示： 当我将选择器更改为

app main

时，它可以工作，但没有任何错误和输出。只返回一个空白页

---

如何使用选择器在

app.component.ts

中呈现不同模块的模板？或者在单个模板中加载不同模块中的不同模板？

您需要在导出中列出导入模块中应可用的组件：

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

@NgModule({
进口：[
公共模块
],
声明：[核心组件]，
导出：[CoreComponent]/您需要在导出中列出导入模块中应可用的组件：

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

@NgModule({
进口：[
公共模块
],
声明：[核心组件]，
exports:[CoreComponent]//你忘记出口了吗？@yurzui yeah刚刚忘记。谢谢提醒。+1你忘记出口了吗？@yurzui yeah刚刚忘记。谢谢提醒。+1