Angular2 - bootstrap property vs method

Question

I'm completely new to Angular2 (with no prior version experience) - would someone be so kind as to explain the difference between bootstrap as a property of NgModule versus bootstrap as a method?

For instance, in the Angular2 Tour of Heroes tutorial, app.module.ts includes the following:

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent
  ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
})

In other examples, I've seen things like:

let phoenixChannelsProvider = provide(PhoenixChannels, { useFactory: () => {
  return new PhoenixChannels("ws://localhost:4000/socket");
} });    
bootstrap(AppComponent, [phoenixChannelsProvider]);

If someone could even vaguely outline the difference in the application of the concept of `'bootstrapping' here, it would be much appreciated.

Answer 1

You need both of them :

In the first one, which is a module and is basically your root module

bootstrap: [ AppComponent ] 

This is saying that in this module , the root component that I'm gonna start my app with is AppComponent and then take it from there .

Is saying that this module is bootstrapping AppComponent , which if you notice is an array, which means you could have multiple app to be bootstrapped as part of your root module , which is not very common.

But the second one , which in the latest version of Angular look like this :

platformBrowserDynamic().bootstrapModule(AppModule)

Is actually bootstrapping/starting the angular2 app.

Angular2 framework needs a start point right ? This is the start point to understand your app and everything.

If you coming from a Java background , this is your main function.

In other words , the app needs to be started from one place, that's the start point ( in reality is more than that).

If you notice, the method platformBrowserDynamic , is somehow self explanatory, it's talking about a platform for browser, this means you could create your own platform and bootstrap your app root module ( which bootstraps your appComponent).

If you search more , you'll realise for NativeScript or Angular2Universal or others , the main difference is the the bootstrap function ( platformBrowserDynamic ).

For example, in Universal, we have :

platformUniversalDynamic().bootstrapModule(AppModule)

Or when you want to use web worker , you'll see :

  bootstrapWorkerApp(AppModule, []);

Answer 2

bootstrap(AppComponent, [phoenixChannelsProvider]);

is from older Angular2 version <=RC.5 and no longer valid

BTW: The Dart version of Angular2 doesn't have NgModule and still uses the bootstrap(...) method.