Understanding Angular bootstrap process
Hello guys. Today we´re going to talk about the Angular bootstraping process. Bootstrapping is the process of initializing or loading an application, in our case today, an Angular application.
When an Angular applications starts it first loads the index.html file (which is generated when we create our Angular project) in the browser. In the beginning our index.html file looks like this:
We can see that there is no Javascript nor CSS file in the file and the body of our html file has a tag <approot> which is not a native html tag. So how Angular loads our JS and CSS files? And where did this tag <approot> came from? Let´s find out!
First of all let´s build our project typing ng build in a terminal opened in our folder´s project.
After that we can see that a folder called dist it´s going to be created in our project and inside of that we can see another index.html like this:
This time we can see some script files (runtime.js, polyfill.js and main.js) that where created and injected into this index.html file. This files are created automatically by the Angular compiler in order to make our application run properly; runtime.js is the webpack runtime file; pollyfill.js is a script that makes browsers support modern versions of Javascript and main.js is the entrypoint of our application and is the main.ts file that were originally in our project and were converted to Javascript (because the browsers only “understand” Javascript code). You can also note that the Angular compiler created a file called styles.css and injected it into our index.html.
That way, we all of the files injected, when our index.html file is loaded the Angular core libraries and also the third part libraries are already loaded.
Now, Angular needs to locate the entry point for our application. To do that it searches for angular.json file, which contains a lot of information about our project, including an attribute called options, which contains a attribute called main in which we can find the path for our main file (the first file that will be executed in our project), our entry point for the application (in our case main.ts).
In your turn, our main.ts file look like this:
As you see we have two imports in this file. The first one is platformBrowserDynamic. This tool is a module responsible for loading the Angular application in the web browser. The second import is AppModule which is a class inside our project.
This class is an Angular module and it is the root module of our application. Angular applications are organized as modules, and every Angular app must have at least one module to properly work. And the module that gets loaded first in our app is called root module.
So, in our case the platformBrowserDynamic is loading our root module (the AppModule) by calling this function bootstrapModule giving it as reference the AppModule. So this module will be loaded and our application will run.
From main.ts Angular will move to the AppModule class, that, in our case, look like this:
We can see that the class AppModule is decorated with a Typescript decorator called @NgModule which indicates that this class is an Angular Module (it reminds me a lot the Spring Boot annotations).
For the @NgDecorator we are passing a metadata object containing the following fields:
declarations in which we specify the directives, components and pipes that belongs to that module (dont´t worry we are going to see about directives, components and pipes in the future);
imports in which we list all the external modules there are required for this Angular app to properly run;
providers in which we register the services of our app (Spring boot feelings AGAIN)
bootstrap which contains the components the Angular should load we this class (AppModule) is loaded.
From AppModule, Angular goes to the components that should be loaded. In our case the AppComponent, which in our case looks like this:
That class is annotated with @Component decorator which indicates that this class is a Angular component. In this decorator we also pass a metadata object with three properties:
selector: this metadata make possible for us to use this component as a html tag and will indicate the name that our component will receive when we pass it to our view (our html file).
templateUrl: this one specify the path for the HTML template that will be rendered we we load our component.
styleUrls: which indicate the stylesheet that will be applied to our view, to out HTML file.
And now Angular knows what to render when the <approot> tag is called and this is how the bootstrap process works in this framework. As we see, with Angular is easy to organize our files which makes our applications more modularized.
We are going to continue our Angular studies and get to know every day a little bit more about this framework. See you soon.
