What are the implications of bootstrapping multiple components

Question

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?

Answer 1

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.