angular - 使用 Angular 2 在同一页面中引导两个应用程序

Question

我正在尝试在同一页面中引导两个 Angular2 应用程序。我尝试使用 platformBrowserDynamic.bootstrapModule() 来做到这一点。但它向我抛出错误“尝试找到 Bootstrap 代码，但找不到。指定可静态分析的 Bootstrap 代码或将 EntryModule 传递给插件选项。”

//Main.ts

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

import { AppModule1 } from './app1/app.module1';
import { AppModule2 } from './app2/app.module2';

import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule1 );
platformBrowserDynamic().bootstrapModule(AppModule2 );

因此，我尝试通过 AppModule1 引导 AppModule2，如下所示，效果很好。

//app1.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppService } from './app.service';

import { App1RoutingModule }  from '../app1/app1-routing.module';
import { App1Component } from '../app1/app1.component';

import { App2Module }  from '../app2/app2.module';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    App1RoutingModule,
App2Module
  ],
  declarations: [App1Component],
  providers: [AppService],
  bootstrap: [App1Component ]
})
export class App1Module { }

platformBrowserDynamic().bootstrapModule(AppModule2);

虽然上述解决方案有效并且我可以创建构建，但是当部署在 Tomcat 上时它不起作用。

如何在同一个屏幕上启动 2 个应用程序？

Answer 1

您可以在同一页面上引导两个不同的模块。你的第一次尝试应该会成功。这是plnkr在同一页面上引导两个模块。

app.ts:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

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

@Component({
  selector: 'my-app2',
  template: `
    <div>
      <h2>Hello2 {{name}}</h2>
    </div>
  `,
})
export class App2 {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

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

main.ts:

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule, AppModule2 } from './app';

platformBrowserDynamic().bootstrapModule(AppModule)
platformBrowserDynamic().bootstrapModule(AppModule2)