A Brief Look at Angular’s Startup Sequence

Before diving into how a component renders on the page, it helps to understand the chain of events that Angular follows when your app boots. This is a conceptual overview, but it’s essential if you want to become comfortable with the framework’s internals.

Step 1️⃣ — angular.json
At the root of any Angular project, you’ll see an angular.json file. It holds a host of configuration options that Angular relies on to build and serve your application.
How Angular Application Starts - Behind The $cene story! — figure 1
Angular begins by reading this file when the app is first launched. Inside, under architect → build → options, there’s a main node — its value points directly to the entry file Angular needs to load.
How Angular Application Starts - Behind The $cene story! — figure 2
That value is usually the default path to the main.ts file in the src folder.

Step 2️⃣ — main.ts
Just like in C, C++, or Java, this is the starting point for your Angular application. The main.ts file lives inside the src folder.
How Angular Application Starts - Behind The $cene story! — figure 3
The function platformBrowserDynamic() is called here. This creates the platform and bootstraps the app. In this call, you specify the root module — the very first module to be loaded when your application starts.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from 
'@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Step 3️⃣ — app.module.ts
Once the root module is found, Angular looks inside it for the bootstrap array. That array lists which component should be launched first — often the AppComponent.
How Angular Application Starts - Behind The $cene story! — figure 4
At this stage, the Angular compiler has enough details to begin producing the final rendering for the browser.

Step 4️⃣ — index.html
The browser loads and parses index.html. As it scans the markup, it encounters a custom selector — typically <app-root>. Angular recognises this selector and mounts the corresponding component into that spot, which is how the app ends up visible in the viewport.

That’s the entire bootstrapping flow — from the config file to the rendered component.