How Angular loads?

Welcome to the fourth article in the series - "A beginner's guide to understanding Angular". You can read the previous articles on this series from this link.

We saw what components and modules are from our third article in this series. But how do these different components get served when we saw "Hello, World!" on our screen from the second article?

To understand that, let's go to our browser window of the hello world screen and do Right-click -> View Page Source, then the screen on the right side appears:

(Note: If your output browser screen is not visible or you have accidentally closed, go to your IDE, open up your project folder, open up a new terminal and type ng serve --open)

We see that there is an <app-root> element as highlighted above. From our basics of HTML, we know that HTML does not have any <app-root> element by default. This new element that appears in the 'Page Source' is custom-built by Angular. So how did this element appear?

So, in our second article of this series, we saw that once we type ng serve --open the "Hello, World!" page was served in the browser. The page that was actually getting served by this ng serve process was this index.html file.

If we see line number 11 in this file, we again see the <app-root> element here. This confirms that the page that was served in the browser and the index.html file are the same.

Similarly, if we open app.component.ts file, we see that there is a selector: 'app-root'. This specifies that the 'app-root' selector is used for recognizing the <app-root> element which is then used for selecting custom made template from templateUrl (HTML page app.component.html) and styleUrl (CSS page app.component.css).

Simply put, when a <app-root> component is present in index.html file, Angular knows that it has to serve app.component.html, app.component.css and app.component.ts files. It knows this because the <app-root> element is tied with the selector 'app-root'. (As seen above)

This understanding of how angular loads is very important in future debugging processes.

And that's a wrap-up. I hope you have learned something from this blog. If it's helpful to you and your front-end development journey then do like, follow me on Hashnode and Twitter and do subscribe to my Hashnode newsletter so that you don't miss any future posts. Thanks for reading and have a great day!

Stay tuned for the upcoming articles in this series!