私は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
モジュールのインポートで使用できるコンポーネントをリストする必要があります。
@NgModule({
imports: [
CommonModule
],
declarations: [ CoreComponent ],
exports: [ CoreComponent ] // <<<< added
})
export class CoreModule {}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加