Bootstrap: how index.html becomes an application

main.ts is the ignition key

Angular is not "HTML that runs." It is a platform that bootstraps a component tree, wires up dependency injection, and then hands control to the router. The sequence is small but worth memorizing: main.ts calls bootstrapApplication(AppComponent, …), which creates the root injector, constructs the root component, and mounts it into the DOM selector in index.html.

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
}).catch((err) => console.error(err));

Open interactive lab →