角度2スタンドアロンコンポーネント

ちょうど最近Angular 2に移動しました。角度2スタンドアロンコンポーネント

ビルドする必要があり、スタンドアロンコンポーネントだけを使用するため、以下のようにコンポーネントを利用できるようにしたいと考えています。私はこれらの構成要素のセレクタの一つは、私は次のコンソールエラーを取得し、現在のページ上に存在しない場合に問題があるページ上でレンダリングするために、これらのコンポーネントを取得する限り、持っている

<body> 
    <component-one></component-one> 
    <component-two></component-two> 
</body>

...

core.umd.js:2838 EXCEPTION: Error in :0:0 caused by: The selector "component-one" did not match any elements

関連するコンポーネントのみをブートストラップする方法はありますか？

また、「Angular 2は開発モードで動作しています。プロダクションモードを有効にするにはenableProdMode（）を呼び出してください。コンソールメッセージは、ページ上にいくつのコンポーネントがあるかによって、倍数で表示されます。これは、私が何かを見逃しているように感じさせます。

モジュールの設定

// Modules 
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

// Components 
import { ComponentOne } from './components/componentOne'; 
import { ComponentTwo } from './components/componentTwo'; 


@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ ComponentOne, ComponentTwo ], 
    bootstrap: [ ComponentOne, ComponentTwo], 
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 
}) 
export class AppModule { 
    constructor() { 

}

}

出典

2016-12-13 John williams

あなたのモジュール構成を追加することはできますか？ – yurzui

確かに@yurzuiは更新されました。 –

あなたは、ブートストラップオプションを省略し、ngDoBootstrap()を自分で実装することができます。コンポーネントを条件付きでブートストラップするには、appRef.bootstrap(SomeComponent);を呼び出してコンポーネントが既にページにあるかどうかを確認する前にquerySelectorを実行してください。

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ ComponentOne, ComponentTwo ], 
    entryComponents: [ ComponentOne, ComponentTwo ] 
}) 
export class AppModule { 
    ngDoBootstrap(appRef: ApplicationRef) { 
    if(document.querySelector('component-one')) { 
     appRef.bootstrap(ComponentOne); 
    } 
    if(document.querySelector('component-two')) { 
     appRef.bootstrap(ComponentTwo); 
    } 
    } 
}

注：

<body> <component-one></component-one> </body>

Plunker Example
： entryComponentsオプションは最後にあなたのindex.htmlにあなたが第2のタグと発生しません角度誤差を省略することができます

を必要とします

メッセージを表示したくない場合はあなただけ（私は最初のソリューションを使用することをお勧めします）上記と同様である（2.3.0以来）PRODモードを有効にするか、次を使用することができ：

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ ComponentOne, ComponentTwo ], 
    entryComponents: [ComponentOne, ComponentTwo] 
}) 
export class AppModule { 
    constructor(private resolver: ComponentFactoryResolver, private inj: Injector) {} 

    ngDoBootstrap(appRef: ApplicationRef) { 
    if(document.querySelector('component-one')) { 
     const compFactory = this.resolver.resolveComponentFactory(ComponentOne); 
     let compOneRef = compFactory.create(this.inj, [], 'component-one'); 
     appRef.attachView(compOneRef.hostView); 
     compOneRef.onDestroy(() => { 
     appRef.detachView(compOneRef.hostView); 
     }); 
    } 
    if(document.querySelector('component-two')) { 
     const compFactory = this.resolver.resolveComponentFactory(ComponentTwo); 
     let compTwoRef = compFactory.create(this.inj, [], 'component-one'); 
     appRef.attachView(compTwoRef.hostView); 
     compTwoRef.onDestroy(() => { 
     appRef.detachView(compTwoRef.hostView); 
     }); 
    } 

    appRef.tick(); 
    } 
}

それは角度が内部ときないことだけ同じですブートストラップコンポーネント

Plunker Example

も

https://github.com/angular/angular/issues/11730
Angular2 - Component into dynamicaly created element

出典

2016-12-13 10:49:43 yurzui

しかし、私はまだ "Angular 2は開発モードで動作していますが、プロダクションモードを有効にするにはenableProdMode（）を呼び出してください。"ブートストラップを取得するコンポーネントごとに？ –

これは単なるデバッグ情報です。各ブートストラップコンポーネントhttps://github.com/angular/angular/blob/2.3.0/modules/%40angular/core/src/application_ref.ts#L449-L475を呼び出しています。プロードモードを有効にした後は、 – yurzui

になりますので、各コンポーネントの角度コアの新しいインスタンスを実行していませんか？ –

角度2スタンドアロンコンポーネント

答えて

関連する問題