Why "bootstrap" key in @NgModule is an array?

Question

As per my knowledge, there can be only one entry point of an application. As shown in the code snippet given below we are passing an array in the bootstrap key which decide the entry point of the application.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent, MyComboboxComponent, 
                    CollapsibleDirective, CustomCurrencyPipe],
  imports: [BrowserModule],
  providers: [UserService, LessonsService],
  bootstrap: [AppComponent]

})
export class AppModule {

}

P.S: I am learning Angular 2 and the question may sound silly :)

Please read https://angular.io/guide/bootstrapping – Murali Murugesan Aug 03 '17 at 11:17 — Murali Murugesan, Aug 03 '17 at 11:17

Max Koretskyi · Accepted Answer · 2017-08-03T11:52:25.163

11

You can pass as many bootstrap components as you want. You will simply end up with several independent components trees:

bootstrap: [AComponent, BComponent]

        RootModuleInjector
                |
                |
       ApplicationRef.views
       /                   \
      /                     \
   AComponent              BComponent

Also see What are the implications of bootstrapping multiple components

When running change detection Angular will run change detection for each tree separately:

class ApplicationRef {
   tick(): void {
    ...
    try {
      this._runningTick = true;
      // here this._views.length equals to 2
      this._views.forEach((view) => view.detectChanges());

You can even add new root component to the ApplicationRef manually if you want to:

const componentRef = componentFactoryResolver.resolveComponentFactory(SomeComponent)
applicationRef.attachView(componentRef.hostView);

        RootModuleInjector
                |
                |
       ApplicationRef.views
       /        |           \
      /         |            \
AComponent  SomeComponent   BComponent

If you need to share some data between the root components, you can define a provider on the root module which will be used to create a RootModuleInjector:

@NgModule({
    providers: [ServiceSharedBetweenRootComponents]
}
export class AppModule {}

And then you'll be able to inject it into every root component:

export class AComponent {
    constructor(service: ServiceSharedBetweenRootComponents)

edited Aug 03 '17 at 11:52

answered Aug 03 '17 at 11:18

Max Koretskyi

101,079
60
333
488

can two or more `independent trees with a single injector` communicate? How? – Vikas Bansal Aug 03 '17 at 11:21
just define a service on the root module and inject it into each component – Max Koretskyi Aug 03 '17 at 11:23
as shown in your diagram `AComponent` and `BComponent`. which one is the root module? do you mean to inject service at @NGModule level in providers? – Vikas Bansal Aug 03 '17 at 11:24
In your recent edit, you made `SomeComponent` a root component and in the diagram you shown it as a sibling of A and B component... why? – Vikas Bansal Aug 03 '17 at 11:30
I don't show it as a sibling. What makes you say so? – Max Koretskyi Aug 03 '17 at 11:31
you said `You can even add new root component to the ApplicationRef manually if you want to` and made `SomeComponent` a root component manually. Then in diagram, you shown `ApplicationRef.views` as child of `RootModuleInjector` and `ACompnent`, `BCompnent` & `SomeComponent` as children of `ApplicationRef.views`. Please forgive my ignorance. Sometimes simple things are hardest to understand – Vikas Bansal Aug 03 '17 at 11:35
yes, that's exactly what I've shown) what confuses you? – Max Koretskyi Aug 03 '17 at 11:38
if `ACompnent, BCompnent & SomeComponent` are children of `ApplicationRef.views` then is `SomeComponent` not a sibling of `A` and `B`? – Vikas Bansal Aug 03 '17 at 11:39
Right, sorry, I got confused. Yes, it's a sibling. Every root component is a sibling of the other root components – Max Koretskyi Aug 03 '17 at 11:45
Oops!! Now I am too confused... How a `root` component can be a sibling as if I inject any service in root component then it will be shared with all the sub component down the tree... can you make your answer more elaboratetive for the forthcoming visiters :) – Vikas Bansal Aug 03 '17 at 11:47
1

@VikasBansal "_if I inject any service in root component_" not the root component, the root **module**. The providers in the root module (the same module that you bootstrap the components) are shared across the app – eko Aug 03 '17 at 11:50
1

Many thanks for your time and the amazing explanation. It is good to know these deep things. :) – Vikas Bansal Aug 03 '17 at 11:58
@Maximus what is the use of putting multiple components in `bootstrap` ? still it take only First component like `bootstrap: [Acomponent, Bcomponent]` in `index.html` `loading..` throws `Acomponentselector did not match any elements` In such case what is the purpose of mentioning multiple components. – k11k2 Aug 03 '17 at 14:00
@k11k2, yes, but you can have all html elements for all bootstrap components inside the `index.html`, right? – Max Koretskyi Aug 03 '17 at 16:21
what is the main purpose/scenario we'll come across mentioning multiple components in bootstrap @Maximus – k11k2 Aug 04 '17 at 10:13
@k11k2, I haven't come across the need to do that yet – Max Koretskyi Aug 04 '17 at 10:50
@Maxim Koretskyi I am tunning my angular application. is there any performance gain if multiple bootstrapped component in nested tree. – Ben Cheng Nov 02 '19 at 06:51

score 4 · Answer 2 · edited Aug 03 '17 at 11:25

4

there can be only one entry point of an application

No. You can instantiate multiple components as entry points in your application.

Example: https://stackoverflow.com/a/36566919/5706293

Here is an example of how we can communicate between root components

Changing shared data between root modules

edited Aug 03 '17 at 11:25

yurzui

205,937
32
433
399

answered Aug 03 '17 at 11:17

eko

39,722
10
72
98

Why "bootstrap" key in @NgModule is an array?

2 Answers2