Bootstrap two apps in same page using angular 2

Question

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 t

Answer 1

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)