How ANGULAR Trigger index.html And Start Working

When we use CLI tool, we can easily create and building angular application and start with developing after a few commands on the CLI.

But how angular start working and how trigger index.html?

This is generally how the angular starts with work.

main.ts

The main.ts file, that is the first code which gets executed. The job of main.ts is to bootstrap the application. It loads everything and controls the startup of the application.

Most importantly here is the line where bootstraps start our angular app by passing app module to the method. AppModule refers to the app.module.ts file.

app.module.ts

The most important part from a file, when angular starts, is bootstrap array in @NgModule.

It basically there is a list of all components which should be known to Angular at the point of time it analyzes our index.html file and here the circle closes.

It's closed because here, we reference our app component.

By default, angular does not scan all of our files. So, if we don't tell it that the new component exists, angular doesn't know it.

index.html

SUMMARY

• Angular started with main.ts.
• Then we bootstrap an angular application and we pass app.module.ts as an argument. In app.module.ts we tell angular: "There is the app component which you should know when you try to start yourself".
• And angular now analyze this app component, reading the set up we pass there and there is SELECTOR app-root.
• Now, angular is enable to handle app-root in the index.html and knows rules for the SELECTOR.
• SELECTOR should insert the app components and have some HTML code - a template attached to him - html component.
• This is how Angular application starts.