Angular 51: Standalone APIs & bootstrapApplication
easy⏱ 5 mincourseangular
ApplicationConfig replaces AppModule's providers array
Where an @NgModule used to list imports: [HttpClientModule, RouterModule.forRoot(routes)], an ApplicationConfig lists function-based providers instead: provideRouter(routes), provideHttpClient(), provideAnimations(), and so on. Each provideX() function returns the set of providers that feature needs — you compose an app by combining them in a flat array.
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideHttpClient()],
};
bootstrapApplication starts the whole app from one component
bootstrapApplication(AppComponent, appConfig) is the entire main.ts. It renders AppComponent directly into <body> (via its selector in index.html) with the providers from appConfig available app-wide — no module wrapper required.
bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
Standalone components import what they use, directly
AppComponent needs RouterOutlet to render <router-outlet />, so it lists imports: [RouterOutlet] right on the @Component decorator — the same pattern as importing FormsModule or CommonModule on any other standalone component.