在angular2非SPA中加载两个组件

给定以下组件。 我想在非SPA网站上使用这些组件，就像。此示例不再有效，因为angular 2的最新beta版使用模块，引导不再定义，我无法让这两个组件并行工作

//我们的第一部分

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

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

---

您似乎缺少模块定义，例如：

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

---

其他任何人尝试这样做的答案是创建两个模块

登记

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

---

你说的有道理，但我似乎无法将这两个组件用作对等组件。静态内容，如在plunker中。angular2似乎只适合SPA应用。我不太确定你想要实现什么，但据我所知，你需要有一个主要组件来引导。它可以是路由器在两个组件之间切换的简单包装。我想要实现的与plunker完全相同，只是在angular2的最新版本中，plunker来自旧版本。如果我只是将angular版本更新到beta.17，就会得到错误。core_1.平台不是一个函数。好的，我明白了。对不起，误会了。

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

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