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.

Summary

An Angular application starts when the Angular CLI serves the index.html file to the browser at localhost:4200. The index.html contains an app-root element, which is a custom component selector. The Angular startup process is initiated by main.ts, which bootstraps the AppModule and declares the root component, allowing Angular to match the app-root selector and inject the application component into the DOM.

Key points

  • The server serves index.html (not a component template) as the single page in this Single Page Application
  • The app.component.ts file defines the root component with a selector property set to app-root, which matches the custom element in index.html
  • The main.ts file is the first code executed and bootstraps the AppModule with the root component
  • The AppModule's bootstrap array tells Angular which component is the root component to instantiate
  • Angular matches the app-root selector in index.html with the component declaration, then injects the component template content into that element
  • The CLI automatically injects compiled JavaScript bundles into index.html at build time, which execute and trigger this bootstrap chain

FAQ

Why do we see app-root in index.html if it is not a standard HTML element?

app-root is a custom element selector defined by the Angular root component in app.component.ts. Angular recognizes this selector and knows to replace it with the component's template when initializing the application.

What is the sequence of files executed when an Angular app loads?

The sequence is: browser loads index.html, injected script bundles execute, main.ts runs first, bootstraps AppModule, AppModule bootstraps the root component, Angular renders app-root selector with the component template.

How does Angular know that app-root in index.html corresponds to the app component?

Angular learns this through the configuration chain: main.ts bootstraps AppModule, AppModule declares app.component in its bootstrap array, app.component.ts defines a selector property set to app-root, and Angular matches this selector when parsing the HTML.