How Angular Bootstraps Application

Did you ever wonder how angular bootstraps application. Many beginners struggle to get the hang of angular bootstrap process. Once you understand bootstrap process you will get the picture of how angular works.

There are two ways in which you can bootstrap angular application.

1. Default or Automatic Bootstrapping.
2. Manual Bootstrapping.

Here we are going to discuss default angular bootstrapping process.

main.ts file is the our starting point which holds the code for bootstrapping our angular application to browser environment.

platformBrowserDynamic().bootstrapModule(AppModule);

this main.ts file will be mentioned in angular.json as entry point for the application.

In the above mentioned code as you can see we are bootstrapping AppModule by default you can bootstrap any module of your wish. This AppModule holds the related details and the component which we want bootstrap basically all the information to run application.

Let’s look into our app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { NewComponent } from './new/new.component';

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

As you can see the above code our @NgModule decorator holds imports array, declarations array, bootstrap array.

Declarations holds all the components which we are using in our application.

Bootstrap array tells us which components needs to be bootstrapped.

Here we are bootstrapping AppComponent by default.