angular2に2つのコンポーネントをロードしないSPA

Question

次のコンポーネントがあるとします。 これらのコンポーネントは、plunker hereとまったく同じように、SPA以外のWebサイトで使用したいと考えています。このサンプルはもはや有効ではありません。最新のベータ2はモジュールを使用しているため、ブートストラップはもはや定義されておらず、2つのコンポーネントを並行して動作させることはできません。

//私たちの最初のコンポーネント。

import {Component} from 'angular2/core' 

@Component({ 
    selector: 'comp1', 
    providers: [], 
    template: ` 
    <div> 
     <h3>Hello, {{name}}</h3> 

    </div> 
    `, 
    directives: [] 
}) 
export class Comp1 { 
    constructor() { 
    this.name = 'I am ng2 component 1' 
    } 
} 

//私たちの第2のコンポーネント。

import {Component} from 'angular2/core' 

@Component({ 
    selector: 'comp2', 
    providers: [], 
    template: ` 
    <div> 
     <h3>Hello, {{name}}</h3> 

    </div> 
    `, 
    directives: [] 
}) 
export class Comp2 { 
    constructor() { 
    this.name = 'I am ng2 component 2' 
    } 
} 

角度のベータ版を使用しています。plunker hereがあります。 最新バージョンの角度2を使用してこれらの2つのコンポーネントをどのように登録するのですか。新しい角度バージョンでは、サンプルは無効です。

ブートストラップをインポートしようとすると、新しいバージョンのアングルが異なる構造になります。

import {platform} from '@angular/core'; 
// platform is undefined. 
import { bootstrap, BROWSER_PROVIDERS, BROWSER_APP_PROVIDERS } from '@angular/platform-browser'; 
// bootstrap is undefined, BROWSER_PROVIDERS is undefined etc. 

Answer 1

誰にも答えをこれを試してみると、tw Oモジュール、およびregister each module separately

登録

//main entry point 
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import {AppModuleA, AppModuleB} from './app'; 

platformBrowserDynamic().bootstrapModule(AppModuleA); 
platformBrowserDynamic().bootstrapModule(AppModuleB); 

モジュールあなたが理にかなっていると言うが、その後、私はピアとして二つの成分を使用することができないようで何

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ AppA ], 
    bootstrap: [ AppA ] 
}) 
export class AppModuleA {} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ AppB ], 
    bootstrap: [ AppB ] 
}) 
export class AppModuleB {} 

Answer 2

あなたは、モジュール定義など不足しているようだ：

app.module.ts

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

import {Comp1} from './comp1'; 
import {Comp2} from './comp2'; 

@NgModule({ 
    imports: [ 
     BrowserModule 
    ], 
    declarations: [ 
     Comp1, 
     Comp2 
    ], 
    bootstrap: [Comp1] 
}) 

export class AppModule { } 

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule);