Angular App Bootstrap & Providers
Bootstrap starts your app with a standalone root component and registers providers (Router, HttpClient, etc.) at the right scope for performance and testability.
App Bootstrap Essentials
- Start: Use
bootstrapApplication()to launch a standalone root component. - Provide features: Add
provideRouter(),provideHttpClient(), etc. at bootstrap. - DI: A provider tells dependency injection how to create or supply a value for a token.
- Scope: Register at the smallest useful scope (feature/route) for performance and testability.
import { bootstrapApplication } from '@angular/platform-browser';import { provideRouter } from '@angular/router';import { provideHttpClient } from '@angular/common/http';bootstrapApplication(App, { providers: [ provideRouter(routes), provideHttpClient() ]});Notes:
- Related: SeeRouter,HttpClient, andServices & DI.
- Register providers at the smallest useful scope (feature or route) to improve performance and testability.
- Use
provideRouter()with lazy routes for faster startup.
Basic Bootstrap and Global Providers
- Bootstrap with Router and HttpClient for app-wide availability.
- Keep the root component minimal; configure providers at bootstrap.
bootstrapApplication(App, { providers: [ provideRouter(routes), provideHttpClient() ] });Example
import { bootstrapApplication } from '@angular/platform-browser';import { Component } from '@angular/core';import { Routes, provideRouter, RouterOutlet } from '@angular/router';import { provideHttpClient } from '@angular/common/http';@Component({ selector: 'home-page', standalone: true, template: `<p>Home works</p>`})class Home {}const routes: Routes = [ { path: '', component: Home }];@Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet], template: `<router-outlet></router-outlet>`})class App {}bootstrapApplication(App, { providers: [ provideRouter(routes), provideHttpClient() ]});<app-root></app-root>Example explained
- bootstrapApplication(App): Starts the app with a standalone root component.
- provideRouter(routes): Registers the Router and routes.
- provideHttpClient(): Enables
HttpClientapp-wide. - RouterOutlet: Renders the active route's component.
Notes:
- Root stays light: Keep the root component minimal; configure providers in
bootstrapApplication(). - Use functions: Use
provideRouter()andprovideHttpClient()instead of legacy modules. - Lazy first: Favor lazy routes to reduce initial bundle and speed up startup.
Feature-Scoped Providers
- Provide services only where needed to avoid unnecessary globals.
- Feature/route providers can improve startup and testability.
const routes = [ { path: 'admin', providers: [provideHttpClient()], loadComponent: () => import('./admin').then(m => m.Admin) }];bootstrapApplication(App, { providers: [provideRouter(routes)] });Example
import { Routes, provideRouter } from '@angular/router';import { provideHttpClient } from '@angular/common/http';const routes: Routes = [ { path: 'admin', providers: [provideHttpClient()], loadComponent: () => import('./admin.component').then(m => m.AdminComponent) }];bootstrapApplication(App, { providers: [provideRouter(routes)] });Only the admin area gets the extra providers.
The rest of the app stays lean.
Example explained
- providers on route: Attaches
provideHttpClient()only to/admin. - loadComponent: Lazy loads the admin component on navigation.
- Scope: Other routes do not receive these providers, keeping the root light.
Notes:
- Scope carefully: Add providers only to features that need them to avoid unnecessary global singletons.
- Avoid duplication: Be aware that scoping providers can create new instances; ensure this is intended.
HttpClient Setup
- Add
provideHttpClient()once at the desired scope. - Enables
HttpClientfor that scope; add interceptors as needed. - Keep interceptors small and focused.
bootstrapApplication(App, { providers: [provideHttpClient()] });Example
import { provideHttpClient } from '@angular/common/http';bootstrapApplication(App, { providers: [provideHttpClient()]});Notes:
- Standalone-friendly: In standalone apps, Use
provideHttpClient()over importingHttpClientModule. - Cross-cutting: Use interceptors for auth/logging; register them once at the appropriate scope.
