Let's Develop an Angular Application - Angular Bootstrapping Process

Introduction

 

In my previous article, I have explained the basics of Angular architecture and installation. In this article, we will see how Angular launches the application and loads its components. This process is called Bootstrapping.

 

To read my previous article, click >> #1- Angular Basic Architecture

 

Angular is a framework that allows us to create a single page application (SPAs).

Let’s open the project in any editor. I am using the Visual Studio Code.

 There are few other editors also available to use. Eg: Webstorm, Atom, Eclipse, etc

 

Once we open the project in Visual Studio, we will see the project directories and files as shown in the below screenshot:

 

 

In this article, we are going to discuss 4 files involved in the bootstrapping process. They are:

• Main.ts·
• App.module.ts
• App.component.ts
• Index.html

These are the main files used to load the first component.

 

Main.ts

 

When the loading has started (ng serve command), the contents of the main.ts file will be executed.

 

This file contains the below statement:

 

                  platformBrowserDynamic().bootstrapModule(AppModule)

                     .catch(err => console.error(err));

 

Please refer to the screenshot below:

 

 

This statement tells Angular to use AppModule as the root module.

 

As we can see, ‘AppModule’ (class name) is passing as a parameter to the ‘bootStrapModule()’ method.

 Angular will execute the contents of the App.module.ts file.

 

App.module.ts

 

This file contains the class ‘AppModule’ which is specified in the main.ts file.

 

The @NgModule() decorator is a function that adds metadata to the class ‘AppModule’ to make it an Angular module.

 

In @NgModule() decorator, we are providing a few array parameters. They are:

• Declarations [] - all components associated with this module
• Imports[] - register other modules required
• Providers[] - register the services required- this method is not recommended from Angular 6 onwards
• Bootstrap []

Bootstrap array

 

This array contains the list of all components which should be known to the Angular at the point of time it analyzes the Index.html file.

 In our case, it is ‘AppComponent’.

 

Please refer to the screenshot below:

 

 

App.component.ts

 

This is the class file of the default component ‘app’.

 

App component is the starting point of our app. Inside this component, we can see the @Component() decorator.

 @Component() decorator tells the angular that the class ‘AppComponent’ is a component.  

 

 

app-root is the selector , this can be used as the directive to access the component.

 We can see this in Index.html

 

Index.html

 

As we already know, Angular is a framework that allow us to create single page application (SPAs).

Index.html is the single file served by server.

 

This file contains some basic html statements with <app-root> tag.

 Please refer the screenshot below.

 

 

Since app-root already known to the angular (selector of the App component), it will load the template of the App Component.

 

Please refer the below diagram to get better idea about the angular bootstrapping process.

 

 

Conclusion

 

In this article, I have tried to explain about the angular bootstrapping process.

 

 I hope this article is useful for others to understand the angular basics.

 

In my next article, I am creating an Angular project named ‘RideYourBike’ – It is bike rental application.

 

We will start the project from very basic and implement various angular features step-by-step.

 

To read my next article, click >> #3- Ride Your Bike - Project creation

 

Happy Learning