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.
Table of Content
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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
1 2 3 | <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
1 2 3 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | "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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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.
1 2 3 | 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
1 2 3 | import { AppModule } from './app/'; |
The last line of code imports AppModule. The AppModule is our Root Angular Module.
1 2 3 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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.
1 2 3 | import { AppComponent } from './app.component'; |
We use @NgModule class decorator to define a Module and provide metadata about the Modules.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @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
1 2 3 4 5 6 7 8 9 10 11 12 | 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
1 2 3 4 5 | <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
Great Explaination…Thanks for you time.