Angular › Standalone Components

How do you bootstrap an Angular application using only standalone components, without a root NgModule?

Beginner

Answer

You call bootstrapApplication with your root standalone component, and provide any application wide services or configuration directly as providers, completely skipping the traditional AppModule that older Angular apps needed.

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

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes), provideHttpClient()]
});

Real-world example A new Angular project's main.ts file bootstraps the application directly from a single standalone AppComponent, without any AppModule file existing anywhere in the project at all.

Common follow-ups: What providers commonly need to be set up here that used to live inside imports in the AppModule?;Can you still add a root NgModule later if a project's needs change?

Angular CLI & Project Structure;Dependency Injection Providers & Injection Tokens