Skip to main content

Angular Bootstrap

Angualr Bootstrap Flow

app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

If you're making use of Ahead-of-Time (AoT) compilation, you would code main.ts as follows.

import { platformBrowser} from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

index.html

<body>
    <app-root>Loading...</app-root>
</body>

app/app.module.ts

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

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

app/app.component.ts

import { Component } from '@angular/core'

@Component({
    selector: 'app-root',
    template: '<b>Bootstrapping an Angular Application</b>'
})
export class AppComponent { }

The bootstrap process loads main.ts which is the main entry point of the application. The AppModule operates as the root module of our application. The module is configured to use AppComponent as the component to bootstrap, and will be rendered on any app-root HTML element encountered.

There is an app HTML element in the index.html file, and we use app/main.ts to import the AppModule component and the platformBrowserDynamic().bootstrapModule function and kickstart the process.
You may optionally use AoT in which case you will be working with Factories, in the example, AppModuleNgFactory and bootstrapModuleFactory.

Why does Angular bootstrap itself in this way? Well there is actually a very good reason. Since Angular is not a web-only based framework, we can write components that will run in NativeScript, or Cordova, or any other environment that can host Angular applications.

The magic is then in our bootstrapping process - we can import which platform we would like to use, depending on the environment we're operating under. Since we were running our Angular application in the browser, we used the bootstrapping process found in @angular/platform-browser-dynamic.

It's also a good idea to leave the bootstrapping process in its own separate main.ts file. This makes it easier to test and easier to reuse and gives better organization and structure to our application.