Angular, one of the most popular and widely used frameworks, provides a ton of built-in features straight out of the box right when we create an angular application using the following command:
ng new appNameThe above command floods your project directory with several files, and now, your project directory looks like this:
Files inside the project directory
Now all one has to do for running the application is to run the following command:
ng serve --oVoila! Your angular app magically appears on some random port(well, it’s 4200 mostly) inside the browser. But wait! How did all this happen?!!!
What is angular doing behind the scenes?!!
How is our code getting rendered?!!
If you, like me, have asked yourself the same questions,
This article has the answer.
Let’s understand what angular compiler does when we run the command “ng serve” by following a step-by-step process:
Step1: Angular looks for the entry point of the application.
To find the entry point, angular looks into the main property of the angular.json file:
angular.json file
The main property defines the entry point of the application, which in the above case, is main.ts. Now angular has found the entry point, let’s move on step two.
Step2: The main.ts file creates a browser environment and loads the module.
All angular applications require a browser environment to run and, to create an angular application, we require a module.
Creating a browser environment and loading the module gets done in a single step inside the main.ts file:
platformBrowserDynamic().bootstrapModule(AppModule)platformBrowserDynamic() creates a browser environment and, bootstrapModule() loads the module. Example of main.ts file:
main.ts file
***Note- In the code above, we see that the bootstrapModule loads AppModule which is the default module that gets loaded in an angular application. We can change the default module to any other module.
Step 3: The angular compiler looks inside the bootstrap property of the AppModule.
AppModule, declared inside the app.module.ts file, consists of all the declarations of components, services, and other modules that are required by the application.
The bootstrap property of the AppModule references the component used to bootstrap the application:
app.module.ts file
In the code above, we see that AppComponent is the component used for bootstrapping the application. We are quite close to understanding the complete working of the angular compiler. Onto the next step!
Step 4:
The angular compiler looks into the AppComponent and initializes it.
The app.component.ts file, contains the AppComponent.
Every component consists of three properties:
selector- used for accessing the component.
template/templateUrl - contains the view (HTML) of the component.
style/styleUrls - contains styles for the view.
Example of AppComponent:
app.component.ts file
The compiler registers the details of the component.
Step5: The compiler renders the index.html file.
The index.html file is the file used by the angular compiler to render our application inside the browser. This file loads the root component of the application (AppComponent) by using the selector (<app-root>):
index.html file
The compiler dynamically adds all the required JavaScript files before the enclosing body tag (</body>) when the application gets rendered:
Example of index.html when it gets rendered inside the browser
The view of the component (HTML) gets rendered inside the <app-root> tags, and we see our application appear inside the browser:
The view of AppComponent getting rendered inside <app-root> tags
There you go, we have now understood the magic behind the scenes. So next time when you serve an angular app, you know what the compiler does to render the code.
Source: medium.com