在 angular2 非 SPA 中加载两个组件

Question

给定以下组件。 我想在非 SPA 网站上使用这些组件，就像 plunker here 一样。此示例不再有效，因为 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'
  }
}

有一个plunker here，使用 angular 的 beta 版本。 如何使用最新版本的 Angular 2 注册这两个组件。该示例不再适用于较新的 Angular 版本。

当我尝试导入引导程序时，新版本的 angular 结构不同。

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

其他人尝试这个的答案是创建两个模块，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 { }

ma​​in.ts

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

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

platformBrowserDynamic().bootstrapModule(AppModule);