Angular - 2-2 How is an angular application loaded and started?

Hello everyone and welcome to this lesson. We are going to see how an Angular application is loaded and started. We open the project created at the end of the previous section, run the dev server with ng serve and reach the app at localhost:4200. That URL is where the development server created by the Angular CLI hosts the application. If we modify app.component.html from the app folder and add an <h3> with "I am in the App component!", the browser refreshes automatically and the new text appears, already styled by Bootstrap which we added to the project.

So far so good - but how does the browser know that it must render the content of app.component.html? One might assume it is because we only have a single component, but that is not the real reason. The file actually served by the dev server is index.html, the single-page-application entry point. Inside index.html we find a normal HTML document with a strange tag in the body: <app-root>Loading...</app-root>. We never see "Loading..." in the running app, because Angular replaces this placeholder with our component tree as soon as the framework has bootstrapped.

How Angular hooks into <app-root>

  • The Angular CLI injects script bundles at the end of index.html, which is why we do not see them in the raw file.
  • The first executed file is main.ts, which calls platformBrowserDynamic().bootstrapModule(AppModule).
  • AppModule declares a bootstrap array containing AppComponent, whose @Component decorator sets selector: 'app-root'.

From there the loop closes: Angular knows the app-root selector listed in the module, finds the corresponding tag in index.html and renders the component template in place. The template is the same app.component.html we edited at the beginning of the lesson, which is why our <h3> shows up on screen.

Understanding this boot sequence is essential before we go deeper. Now that we know how Angular wires main.ts, the AppModule, the AppComponent selector and the index.html placeholder together, we can move on and dig into how components actually work, how to declare new ones and what the application module does in detail.