How Angular application starts

Before jumping into details of Angular and how it starts the application, let’s talk a bit about what is Angular?

Angular is a Javascript framework that allows you to develop a Single Page Application. Angular uses Components to split the complex code into multiple components and this allows us to create reusable components.

So now how the Angular application starts and how it renders different components into the view.

First of all, we index.html file which is served in the browser.

index.html

If we see this index.html file we will see one unique tag <app-root>, this is not an html tag this is provided by angular.

In angular each component has its own selecter which can be used to create an instance of the component, therefore this <app-root> is a selector for a component and this app-root is a root component of angular application.But how does index.html is able to recognize it?

we have main.ts file this file is the first which get’s executed and if we inspect the angular application page you will see some scripts added by angular and these scripts get to run first then we scan index.html.

main.ts

In main.ts we can see we are bootstrapping AppModule in line 11. Now let’s look at app module.

app.module.ts

Here we can see we have bootstrap array in line 16 which contains AppComponent(the root component of angular application).

So what happens is main.ts bootstraps Appmodule which in turn bootstraps Appcomponent so by the time index.html scans it should know what<app-root> means.

This is how angular application starts. Happy Learning.