How Angular Application Gets Loaded/Initiated?

Our Browser is showing a lot of content and there’s not a trace of it in index.html.

How is this happening? What’s with this weird <app-root> tag too?

Root Component:

<app-root>  is one of our own Component which CLI created for us.

I know I haven’t spoken about Component at all and I will dive deeper into in next article, but before that let’s try to resolve this mystery of where the content is being loaded.

Let’s talk about root component, the app component which lies in src/app folder.

 app.component.ts somewhat solves the text-mystery. We see a selector tag which is named app-root, the same text which was present in index.html.

app.component.html hold the text template which we see in the browser.

Clearly, there seems to be some connection between index.html and app components.

But, how do app components template is loaded in index.html? Let’s find out.

If we look at the source code in our browser, we see there are few script files automatically injected at the bottom(like inline.bundle.js), which we didn’t see in raw index.html file.

These files are bundled when we hit ng serve CLI command and added automatically in index.html . They contain all the codes we write in the app folder.

So, the first file which gets executed during ng serve is from file name main.ts.

Main File Of Angular – main.ts

Main.ts has a bunch of imports at the top but we’ve to specifically look that line which starts our application where we pass AppModule to the method which is part of app.module.ts

platformBrowserDynamic().bootstrapModule(AppModule)

Closer Look at App.module.ts :

The app.module.ts file has a bootstrap array which holds AppComponent, same root component which had that weird <app-root> tag. Here, we reference that AppComponent which then renders its app.component.html file into index.html.

In a Nutshell: 

Step 1: main.ts file gets loaded. It bootstraps(starts) the application by calling App.module.file.

Step 2: app.module.ts file holds an array of bootstrap components. Here, we find our root component reference.

Step 3: Root component gets loaded and the template files from app.component.html become part of index.html.