6

I can do the following:

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, BComponent],
    bootstrap: [AppComponent, BComponent] <---------- here two components
})

and it'll create two html tags:

<my-app ng-version="2.4.5" _nghost-lii-0=""><h1 _ngcontent-lii-0="">Hello Angular</h1></my-app>
<b-app ng-version="2.4.5" _nghost-lii-0=""><h1 _ngcontent-lii-0="">Hello Angular</h1></b-app>

I'm wondering what are the implications of such setup? Am I just going to have two trees of components with a single injector or they will act as two different applications? Any other things I haven't thought about?

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488

1 Answers1

6

Am I just going to have two trees of components with a single injector

Yes, you will have two independent root trees. They will be registered under ApplicationRef.views and when ApplicationRef.tick() function will be called Angular will run change detection for both trees. It will be single application and they will share the injector defined for the AppModule.

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • Can you point some case where this approach needed? I mean using more than one root components in bootstrap? #Justasking – Pardeep Jain Jan 18 '19 at 07:31
  • 1
    @PardeepJain, CDK portals would be a good example, i.e. rendering Angular components tree outside of Angular components) – Max Koretskyi Feb 01 '19 at 17:51