使用angular 2在同一页面中引导两个应用 [英] Bootstrap two apps in same page using angular 2

问题描述

我正在尝试在同一页面中引导两个angular2应用程序.我尝试使用platformBrowserDynamic.bootstrapModule()进行此操作.但这给我带来了错误，例如试图找到引导程序代码，但找不到.指定静态可分析的引导程序代码或将entryModule传递给插件选项."

I am trying to bootstrap two angular2 apps in the same page. I have tried doing that using platformBrowserDynamic.bootstrapModule(). But it's throwing me error as "Tried to find the bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options."

//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，如下所示.

So I tried bootstrapping AppModule2 through AppModule1 as given below which worked.

//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上却无法正常工作.

Though above solution worked and I could create build, but when deployed on Tomcat it did not work.

如何在同一屏幕上引导2个应用程序?

How to bootstrap 2 apps in the same screen?

推荐答案

您可以在同一页面上引导两个不同的模块.您的第一次尝试应该可以.这是 plnkr ，在同一页面上引导了两个模块.

You can bootstrap two different modules on the same page. Your first attempt should work. Here is the plnkr with two modules bootstrapped on the same page.

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)

这篇关于使用angular 2在同一页面中引导两个应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！