How an Angular 7 Application get Started

In this post we will be discussing about how an Angular project gets started or loaded. In every tutorial out there, the first thing you will notice is that people change text in the app.component.html and the same thing will be shown in the browser. Now let's see how that text is been shown on the browser, what's the background of it and how the app component is loaded.


To Understand it first we have to look at the index.html file which is the starting point of our application. As you can see blow we have <app-root> tag which is not a valid HTML tag. So how are we getting this tag and where this tag is coming from.

The tag is coming from app.component.ts file which has the selector name as app-root as shown below. Now that means when the Angular is loaded the <app-root> tag will be replaced with the app.component.html file which is fair enough because that is what we are seeing when we load localhost:4200.

Also we have forgot to look at the main script file of Angular application which is main.ts as shown below. This is actually the main file which is loaded when the Angular application is run. What is does is, it creates javascript bundles and automatically adds it to our index.html file. As you can see below, it is taking AppModule as its parameter and creating bundles out of App Component.

If you go through the App Module file, you will see that we have a line bootstrap: [AppComponent], which is a list of components which should be known to the compiler at the time of analyzing the index.html file.

So if we go through the flow which is something like below :

Main.ts - Taking App Module as Parameter
App Module - Having AppComponent in the bootstrap array
App Component - Having the Selector <app-root>
Index.html - Having <app-root> as an HTML tag
App Component HTML file - Replacing <app-root> tag in index with the HTML in the app.component.