Bootstrapping in Angular: How It Works Internally

Bootstrapping in Angular: How It Works Internally

Let's learn how Angular functions internally and bootstraps our app in this post on Angular bootstrapping. To start a new Angular project, we used ng new. It produces a large number of boilerplate codes. Additionally, Typescript, Webpack, and Karma are configured. When the app is launched, a straightforward HTML page with various helpful connections to Angular is shown.

Bootstrapping is the process of initializing or loading our Angular application.

Angular takes the following steps to load our first view.
Loads Index.html
Loads Angular & Third-party libraries & Application
Executes application entry point (main.ts)
Load & execute Root Module (app.module.ts)
Executes the Root Component (app.component.ts)
Displayes the template (app.component.html)

Index.html loads first
There are no javascript files in the index.html. Neither there is a stylesheet file. The body of the files has the <app-root></app-root> HTML tag.
Now Build the Application, to view the compiled application, run ng build.

Anular by default create all compiled code inside dist folder.
Now open the dist\getting-started and open the index.html.
You can see that the compiler included four script files. They are runtime, polyfills, styles, & main.

runtime.js: Webpack runtime file
polyfills.js – Polyfill scripts for supporting the variety of the latest modern browsers
styles.js – This file contains the global style rules bundled as a javascript file.
vendor.js – contains the scripts from the Angular core library and any other 3rd party library.
main.js – code of the application.

Loads Angular & Third-party libraries & Application
Both the Angular core libraries and third-party libraries are loaded with the loading of index.html. Now the angular needs to locate the entry point.

Application Entry point - main.ts
The entry point of our application is main.ts. You will find it under the src folder.
The Angular finds out the entry point from the configuration file angular.json. This file is located in the root folder of the project.

Before Angular 5, the configuration file was called angular-cli.json. Since the release of Angular 6, it is now angular.json.

main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

platformBrowserDynamic
platformBrowserDynamic is the module responsible for loading the Angular application in the desktop browser?
Angular Applications can be bootstrapped in many ways and in many platforms. For example, we can load our application in a Desktop Browser or in a mobile device with Ionic or NativeScript.
If you are using the nativescript, then you will be using platformNativeScriptDynamic it from nativescript-angular/platform library

AppModule
The AppModule is the app's root module. Modules are how the Angular apps are structured.
Each Angular application must contain at least one module. A root module is the one that loads first when an application is launched.

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
TheplatformBrowserDynamic loads the root module by invoking the bootstrapModule and giving it the reference to our Root module i.e AppModule



Root Module
The angular bootstrapper loads our root module AppModule. The AppModule is located under the folder src/app.

Root Component
The root module must have at least one root component AppComponent. The root component is loaded when the module is loaded by Angular.

AppComponent
The root component of the AppModule

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

Template
The AppComponent defines the template as app.component.html and the CSS Selector is app-root