How an angular application executes?

When we create a brand, new angular application using angular CLI it creates some default structure for us. To understand how an angular application executes we need to understand those clearly.

 

main.ts file is the entry point for any anguar appliation where it load AppModule. See the highlited code in the below digram.

In the below diagram appComponent is used in bootstrap array. So when main.ts file loads it looks for the app.module.ts file and looks for the bootstrap element and loads all the contain of it. Anything we work new in the angular should be registered in the app.module.ts file. If not you will get a compile time error. As it pointing to AppComponent, it will load the app-component.

In the below file I have just changed the title value to “A G Kumar Application”. Now open the app.componet.html file.

Now if you will run the application you will get the below output:

All this is fine then a  uestion comes into the mind what is the need of index.html file. As we have not used anywhere in the above. If you will remove or comment out the code in the index.html file then you will get blank page.

If you closely observe you will get <app-root></app-root>

From where it is getting? This is from app-component selector where it is defined.

So, when first time application loads it looks for the index.html file where it gets the app-root selector. We have angular.json configuration file where it is defined which file need to be loaded first. Below is the screenshot.