HTMLファイルのブートストラップ角度成分

Question

フロントエンド側でDjangoでAngularを使用しています。 SPAにはAngularを使用しませんが、Djangoを使用してテンプレートを提供しています。問題は、テンプレートに角度成分を注入する必要があることですが、わかるように、ルートモジュールを1つしかブートストラップできません。

これは私のapp.module.ts：

@NgModule({ 
    declarations: [ 
    ContactComponent, 
    AboutComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule 
    ], 
    providers: [], 
    bootstrap: [ContactComponent, AboutComponent] 
}) 

私はcontact.htmlでContactComponent <contact></contact>を注入したい、とabout.htmlでAboutComponent <about></about>。 NG-ビルドした後、私は、エラー、次の取得

：セレクタ「接触」は、任意の要素（...）と一致しませんでした

about.html 任意の要素（...）と一致しませんでした「約」セレクタ in contact.html

角型コンポーネントをエクスポートしてhtmlファイルで使用するにはどうすればよいですか。たぶんAngularはSPAのためだけにビルドされているか、何か不足しています。

angular-cli（これ以上SystemJSを使用しないでください）によって生成される私のプロジェクトでは、角度バージョン4を使用します。

Answer 1

あなたがやっていることはプログラミングの面で正しいです。実行中の宣言メタデータを使用して複数のモジュールをブートストラップすることができます。だからあなたのエラーはあなたが示したコードのために来ていません。インポート、リーチ、セレクタをチェックする必要があります。いずれかの方法。

ルートコンポーネントを1つだけブートストラップするという感覚は、モジュール性をより意識した合意です。そして、あなたはあなたのモジュールの感覚は、より個々のアプリのようなものである場合は、そのmain.tsブートストラップ（各1）をやって main.ts

import {bootstrap} from '@angular2/platform/browser' 
import {FirstComponent} from './my-first.component' 

bootstrap(FirstComponent); 

でそれらを分離することができ、複数のモジュールに

をブートストラップするためにいくつかの他の方法を持っています

を入力し、HTMLでインポートします。

System.import('first/main').then(null, console.error.bind(console)); 
System.import('second/main').then(null, console.error.bind(console)); 

感覚では、バレル、ヘルパーまたはどのようにあなたがそれを名前を付けたいとして動作するメインモジュールを持つことができる「パッケージ」として持っている場合。モジュールをインポートします

@NgModule({ 
    declarations: [First], 
    exports: [First] 
}) 
export class FirstModule 

@NgModule({ 
    declarations: [Second], 
    exports: [Second] 
}) 
export class SecondModule 

@NgModule({ 
imports: [FirstModule, SecondModule], 
exports: [FirstModule, SecondModule] 
}) 
export class BarrelModule 

このモジュールは、必要なときにのみ使用できます。