Bootstrapping in Angular 2 Application

In our previous tutorial, we showed How to create simple Angular 2 Application. The Application displayed “App works”. In this tutorial let us look at what happen’s behind all those boilerplate codes that generated by Angular 2 CLI and see how Angular 2 Application gets bootstrapped.

Bootstrapping in Angular 2 Application

What is a Bootstrapping

The Bootstrapping is a technique of initializing or loading our Angular 2 application.

let’s walk through our code created in Create your First Angular2 Application and see what happens at each stage and how our AppComponent gets loaded and displays “app works!”. The Angular 2 takes the following steps to load our first view.

Loading the Angular Core Libraries
Loading the Main entry point
Loading the Root Module
Loading the Root Component
Loading the Template

Download the source code Github. The Code is available in GettingStarted Folder

Loading the Angular Core Libraries

First, our application needs to load the Angular 2 Components. This is done from the index.html

Loading Index.html

The index.html is the first page that is served by our web host. Let us look at index.html, which was created by Angular CLI in our last tutorial How to Create Angular 2 Application

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Components</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <app-root>Loading...</app-root>
</body>
</html>

There are no javascript files included in the index.html. Neither you can see a stylesheet file. The body of the files has the following HTML

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

How do Angular 2 loads ?. The Answer lies in the Module bundler Webpack. To Find out let us build our application

Building Application

We run our application using the (NPM Package manager) command npm start. This command actually translates into ng serve.

ng serve does build our application but does not save the compiled application to the disk. It saves it in memory and starts the development server.

To Build & create a distribution copy of our application, open the command prompt and run the following command

ng build

The ng build is Angular 2 CLI command. This command builds our application and copies the output files to the dist folder. Now open the dist folder and open the index.html.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Components</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <app-root>Loading...</app-root>
    <script type="text/javascript" src="inline.js"></script>
    <script type="text/javascript" src="styles.bundle.js"></script>
    <script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

The above is our index.html after our application is built. You can see that the three script files (inline.js, styles.bundle.js & main.bundle.js ) are added to our original index.html.

These files are added by the Webpack module loader.

What is Webpack?

Webpack is a bundler. Webpack scans our application looking for javascript files and merges them into one ( or more) big file. Webpack has the ability to bundle any kind of file like JavaScript, CSS, SASS, LESS, images, HTML, & fonts etc.

The Angular 2 CLI uses Webpack as module bundler. The Webpack needs a lots configuration option to work correctly. The Angular 2 CLI sets up all these options behind the scene.

The Webpack traverses through our application looking for javascript and other files and merges all of them into one or more bundles. In our example application, it has created three files (inline.js, styles.bundle.js & main.bundle.js ). The Angular 2 core files along with all other files are now merged and is part of these three files

So when index.html is loaded, the Angular 2 loaded.

Loading the Entry point

The Angular 2 is now loaded via our index.html page. The next step is to find out the entry point of our application. The entry point of our application is main.ts

angular-cli.json

The Angular finds out about the entry point of our application from the configuration file angular-cli.json. This file is located in root folder of our application. The relevant part of the angular-cli.json is shown below

"apps": [
  {
     "root": "src",
     "outDir": "dist",
     "assets": "assets",
     "index": "index.html",
     "main": "main.ts",      //main
     "test": "test.ts",
     "tsconfig": "tsconfig.json",
     "prefix": "app",
     "mobile": false,
     "styles": [
         "styles.css"
     ], 
     "scripts": [],
     "environments": {
         "source": "environments/environment.ts",
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
     }   
   }
],

Note the main property point towards to main.ts. The main.ts file is located in the root folder

Loading the Root module

Every application in Angular 2 must have one root module. The root module must be loaded first. The Angular 2 loads the main.ts file to locate the root module. Our main.ts file is as shown below

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Let us look at the each code in detail.

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

The first line of the code import the module platformBrowserDynamic from the path ‘@angular/platform-browser-dynamic’.

What is platformBrowserDynamic

platformBrowserDynamic is the module, which is responsible loading the Angular 2 application in the desktop browser.

Angular 2 Applications can be bootstrapped in many ways. Our Application can be loaded in many different environments. For example, we can load our application in a Desktop Browser or in a mobile device with ionic or nativescript.

platformBrowserDynamic is the library this is used to bootstrap angular 2 application in the Desktop browser

If you are using the nativescript, then you will be using platformNativeScriptDynamic from “nativescript-angular/platform” library and will be calling platformNativeScriptDynamic().bootstrapModule(AppModule). Read more about Angular 2 Nativescript bootstrap process from here

import { AppModule } from './app/';

The last line of code imports AppModule. The AppModule is our Root Angular Module.

platformBrowserDynamic().bootstrapModule(AppModule);

Finally, we instruct the platformBrowserDynamic to load the root module by invoking the bootstrapModule and giving it the reference to our Angular Root module ‘AppModule’

Loading the Root Component

The angular bootstrapper loads our root module AppModule. The AppModule is located under the folder src/app. The Code of our Root module is shown below

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

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

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

The Angular 2 applications are organized as modules. Every application built in Angular 2 must have at least one module. The module, which is loaded first when the application is loaded is called as root module.

The Every Angular module must have at least one root component. The root component is loaded, when the module is loaded by the Angular.

In our example, AppComponent is our root component. Hence first we import it.

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

We use @NgModule class decorator to define a Module and provide metadata about the Modules.

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

The @NgModule has three objects

imports

We need to list all the external modules required including other Angular modules, that is used by this Angular Module

Declarations

The Declarations array contains the list of components, directives, pipes & Services that belong to this Angular Module. We have only one component in our application AppComponent.

bootstrap

The component that angular should load, when this Angular Module loads. The component must be part of this module. We want AppComponent load when AppModule loads, hence we list it here.

The Angular reads the bootstrap metadata and loads the AppComponent

Loading the Template

Finally, we arrive at AppComponent, which is the root component of the AppModule. The code of our AppComponent is shown below

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works!';
}

The Class AppComponent is decorated with @Component Class Decorator.

The @Component class decorator provides the metadata about the class to the Angular. It has 3 properties in the above code. Selector, templateURL & styleUrls

templateURL

This property contains HTML template, which is going to be displayed in the browser. In the above example, it just displays the “Hello & Welcome to ABC Bank Ltd.” inside the h1 tag

Selector

This property specifies the CSS Selector , where our template will be inserted into the HTML. The CSS Selector in our code is ‘app-root’

Our index.html already have the ‘app-root’ CSS selector defined

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

The Angular locates ‘app-root’ in our index.html and renders our template between those tags.

Source Code

Download the source code gitHub. The Code is available in GettingStarted Folder

Conclusion

We just looked at how Angular 2 applications are bootstrapped to get up and running

How to Create Angular App

Components