Bootstrapping of the Angular Application

Seeing the complexity of the Angular file structure, the first question that comes to the mind is how does it actually works?

Bootstrapping is the process of loading the whole Angular Application.

Understanding the bootstrapping process gives you a great insight of the Angular architectural design as well as the connection of various parts of angular like modules, components, directives, services, dependency injection, pipes with each other.

It also gives you an understanding of how Angular segregate their functionalities, still make them work together as a whole application.

If you are the one who get's scared of the long file structure; believe me it's a very straightforward procedure, so let's get started:

• The file structure of the Angular application is as follows:

• The bootstrap process loads main.ts which is the main entry point of the application.
• Keeping the main.ts file separate only for the bootstrapping process is a good way to isolate components from the bootstrap call. It gives a better organisation structure to the application with an easier test and reuse.
• Let’s look what’s there in main.ts file:

• Angular application can run in NativeScript, or Cordova, or any other environment that can host Angular applications. The environment of the application determines the platform to be imported for the bootstrapping process. For example, for browser specific application @angular/platform-browser-dynamic is used.
• The platformBrowserDynamic().bootstrapModule function calls the AppModule and kick-starts the process. This is how the AppModule acts as the root module and loads at the start of the application.
• Every application has at least one Angular module, the root module that you bootstrap to launch the application. By convention, it is usually called AppModule.
• This is how an AppModule looks like:

• AppModule is a class with @NgModule decorator. An NgModule decorator describes how the application parts fit together. It takes a metadata object with the properties: declarations, imports, providers, bootstrap and tells Angular how to compile and launch the application.
• Just like AppModule is the root module, AppComponent is the root component that loads on the bootstrap. The bootstrap property in the @NgModule decorator register’s AppComponent as the root component.
• Now if we have a look of AppComponent we will see the selector name in @component decorator as ‘app-root’.

• The index.html file has HTML tag <app-root> with the same name as the selector name of the AppComponent.

• This is how AppComponent is the first component that gets rendered on bootstrap into the view. As Angular has hierarchical component structure you can embed other components into the template of the AppComponent.
• This helps in keeping the index.html file clean.

Hence, 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.

Hope you can now make out how the whole application connects and works altogether.Feel free to share your experiences in the comments section.