How Angular Application Starts - Behind The $cene story!
Tags: angular, typescript, intermediate, webdev
Published: 2022-01-16 07:51:15

Today we will learn the application flow in Angular. 
What happens when the application starts.
It would be a theory but again an important one if you want to master Angular.
---

1️⃣ **angular.json** 

When you open up your angular project you might have noticed a file sitting at the project root - `angular.json`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkbl5l2977mlwritfe0h.PNG)
It is a very important file and contains several important configuration information to run the angular application.
A detailed overview I will provide on this very soon.

When the application first starts Angular looks for this file.

So now if you open the file you will find a node called `main` under 
architect -> build -> options , you would see a main node
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l3uo14c8zjg07tlsts9.PNG)
Once Angular found the file it starts looking for the main node.
The value of the main node is a file path that Angular is looking for - the `main.ts` under src folder.


2️⃣ **main.ts**
This is the main entry point. As an analogy if you have a prior knowledge of C/ C++/ Java you must have seen there also that main is the starting point.
The `main.ts` file is present under the `src` folder.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85pzrdnktsxx2ag6c87e.PNG)

```
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from 
'@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
```
`platformBrowserDynamic` creates the platform. This function is also used to bootstrap the Angular Application. Here we specify the first module that should be loaded when the application starts for the first time - the root module. In other words the bootstrapping module.

3️⃣ **app.module.ts**
Once angular finds the starting module the `app.module.ts` (where all the components/ directives/ pipes associated to this module is present and dependency to other module is also present) it looks for the bootstrap option -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4p3109dkii4368acbyp8.PNG)
Where the starting component name has been specified - in this case the AppComponent.

By now Angular compiler has all the required information it needs to work.

4️⃣ **index.html**
Now the index.html is loaded and starts parsing. Once it finds the selector <app-root> it exactly knows which component to load and the AppComponent is displayed in the screen.

And that's it. This is how the application starts.

Hope you enjoyed reading the post

If you liked it please _like_ ❤️ _share_ 💞 _comment_ 🧡.

Coming up more topics on Angular.
So stay tuned.

I will be [tweeting](https://twitter.com/Anubhab_0905) more on `Angular` `JavaScript` `TypeScript` `CSS` tips and tricks.

So hope to see you there too 😃

**_Cheers_** 🍻 
_Happy Coding_