DEV Community

Zelimir Stefanovic
Zelimir Stefanovic

Posted on

How ANGULAR Trigger index.html And Start Working

Angular start - start

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.

Angular main.ts - 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.

Angular app.module.ts - 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.

Angular app.component.ts - app.component.ts


  • 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.

Top comments (2)

zuo305 profile image
John zuo

Is there some setting I can change the entry name from "main.ts" to something else?

parasraina_ profile image
Paras Raina

you can change the entry file by going to the angular.json file and change the file from main.ts to any other ts file of yours under main in the build section