Hiprup

How does an Angular application work (bootstrapping process)?

An Angular application bootstraps through a sequence of steps that hands control from main.ts to the root component.

  • main.ts — entry point; calls bootstrapApplication() (modern standalone) or platformBrowserDynamic().bootstrapModule(AppModule) (NgModule-based).

  • Platform created — Angular initializes its platform-browser; sets up DI and zone.js.

  • Root module / standalone bootstrap — loads providers, configures imports.

  • Root component instantiatedAppComponent renders into <app-root> in index.html.

  • Change detection starts — Angular tracks state changes via Zone.js (or Signals in v17+) and updates the DOM.

  • Lazy modules / routes — loaded on demand as the user navigates.

  • angular.json — build config controls which file is the entry, output paths, optimization.

// Modern standalone bootstrap (Angular 17+)
// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';

import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

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

// Legacy NgModule bootstrap (still works, pre-standalone)
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

main.ts is the entry point — the bundler emits it as the first script. The modern path calls bootstrapApplication(AppComponent, { providers }): Angular creates the platform, instantiates the root standalone component, and registers the providers (provideRouter, provideHttpClient, provideAnimations are the typical three). The legacy path calls platformBrowserDynamic().bootstrapModule(AppModule) — Angular reads AppModule's metadata, instantiates the declared root component, and starts change detection. Both end with the root component rendering into <app-root> in index.html.

The 2026 path is bootstrapApplication(AppComponent, { providers }) with provideRouter / provideHttpClient. Mentioning legacy bootstrapModule() shows you've worked with both eras.

How does an Angular application work (bootstrapping process)? | Hiprup