使用角2在同一頁面中引導兩個應用程序

Question

我試圖在同一頁面引導兩個angular2應用程序。我已經嘗試使用platformBrowserDynamic.bootstrapModule（）來做這件事。但是它將錯誤描述爲「試圖找到引導程序代碼，但是不能。指定靜態可分析的引導程序代碼或將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)