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 :)

Answer 1

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)

Answer 2

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