Which file is executed in Angular first?

​ Photo by Tudor Baciu on Unsplash

Angular is sometimes confusing, and one of the confusing questions is which file executes in it first. It’s been bothering me for a long time and I had to look up a lot of explanations. So I thought why not write an article on this topic so that others can benefit from it.

So here we go, bon voyage!

Json, package.json, package-lock.json, SRC Folder etc.

When we run ng ser

“Index” : “SRC/index. The HTML”

“Main” : “SRC/main. Ts”

It loads up *main.ts* (first file that executes) and read its content. In this file we specify which environment to use for our application and the most important thing, which module to bootstrap, the code is as follows:

It loads main.ts (the first file executed) and reads its contents. In this file, we specify the environment to be used by the application and the most important boot module as follows:

platformBrowserDynamic().bootstrapModule(AppModule)

This means that to start the application, the first Module to load (boot) is the App Module. Then read the **a page module. ts ** file.

bootstrap: [AppComponent]

In this file, we specify which components to boot, what all the dependencies are, and so on. It only loads the component specified in the boot array and loads it. Here, it loads the App Component and registers it with its selector name. At app.component.ts we see that the selector is **”app-root”**

This index.html is used when the browser tries to load the application it loaded first. This is a normal HTML file containing a header, body, etc. In this file, we see a tag:

When we build our application, it inserts all the scripts needed to render the corner component in the index.html file. As we discussed earlier, the selector for the APP component is app-root. The browser reads this tag and loads the app-Component instead using the script provided.

conclusion

So, when an Angular application starts, it loads the main. ts file. Here we bootstrap the root module, app.module.ts, where we specify a component as the bootstrap component and tell Angular to load the component and all its dependencies at startup. And register its selector app-root.

Now when the browser loads the index.html file, it knows what app-root is and renders all the contents of this component. Thanks for watching!