Angular 9 platform bootstrap multiple modules - run multiple applications on the page

问题

I'm working on a project which requires to run two applications on the page. Something like:

<body>
  <app-main></app-main>
  <app-secondary></app-secondary>
</body>

The idea is that two applications have their own Injector/Routing/NgZone, one of the application will be shown at a time by updating the style display: none/block.

I can achieve it by bootstrapping two modules in the main.ts. It works fine with the isolated Injector/Routing/NgZone:

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));


platformBrowserDynamic().bootstrapModule(AppSecondaryModule)
.catch(err => console.error(err));

Main module:

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

}

Secondary module:

@NgModule({
  declarations: [AppSecondComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppSecondComponent]
})
export class AppSecondaryModule{

}

But I don't see any official document about bootstrapping multiple modules, so do you guys have any idea/comment about it? Will it cause any side effect and is it the right way to go?

Btw, I've tried the provideIn: 'platform' which was just introduced in Angular 9, it works great, both applications can use that shared service.

Thank you.

回答1:

I think I found it in the document.

The platformBrowserDynamic() method creates an injector configured by a PlatformModule, which contains platform-specific dependencies. This allows multiple apps to share a platform configuration. For example, a browser has only one URL bar, no matter how many apps you have running. You can configure additional platform-specific providers at the platform level by supplying extraProviders using the platformBrowser() function.

https://angular.io/guide/hierarchical-dependency-injection#platform-injector

That means Angular is supporting run multiple apps on the same platform (page) and we even can share a platform service which is configured as provideIn: 'platform'.

来源：https://stackoverflow.com/questions/61454317/angular-9-platform-bootstrap-multiple-modules-run-multiple-applications-on-the

标签

html

angular

typescript

bootstrap-4