Bootstrapping an Angular application

Similar to AngularJS, before our application gets rendered, it goes through the bootstrap process. In Angular, we can bootstrap an application in different ways, depending on the used platform (for instance, web, NativeScript, and with JIT or AOT compilation enabled). Let's take a look at a simple example, of how we can bootstrap a web app, in order to get a better understanding of how the Angular modules can be used in the process:

import {NgModule} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';

@NgModule({
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  declarations: [AppComponent],
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

With the @NgModule decorator in the preceding example, we declare AppModule and we also import BrowserModule. Note that this time, we provide a value to the bootstrap property, where we explicitly declare that we want AppComponent to be used for bootstrapping our application.

On the last line of the file, we invoke the bootstrapModule method of the object returned by the invocation of platformBrowserDynamic with the AppModule argument.

In recap, the modules in Angular have an important role: they not only group the building blocks of our application logically but also provide a way we can achieve encapsulation. Last, but not least, NgModules are heavily used in the bootstrap process of the application.