Bootstrapping — main.ts & app.config

bootstrapApplication starts the root component, while app.config wires up the router, HTTP client, animations, and other app-wide providers.

4 min read Level 2/5 #angular#main#bootstrap

What you'll learn

Read main.ts and understand bootstrapApplication
Add providers via provideRouter and provideHttpClient
Recognize the ApplicationConfig shape

Bootstrapping is the moment Angular hands control of a piece of the DOM to your root component. In Angular 20+ the API is small enough to fit on one screen.

main.ts — The Entry Point

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

bootstrapApplication takes the root standalone component and an ApplicationConfig. It replaces the old platformBrowserDynamic().bootstrapModule(AppModule) incantation NgModule apps used.

app.config.ts — Providers

The config is the one place to register every app-wide service:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(withFetch()),
    provideAnimations(),
  ],
};

Each provideXxx function is the new, tree-shakeable way to register a feature. If you don’t call provideHttpClient(), the HTTP client is not bundled — your app stays smaller.

Where Bootstrapping Hooks Into the DOM

Angular looks for the root component’s selector inside src/index.html:

<body>
  <app-root></app-root>
</body>

Whatever the root component renders replaces that tag’s contents on startup. From there, the rest of your component tree takes over.

TypeScript in Angular →