APP_INITIALIZER

Lesson content

What is APP_INITIALIZER? APP_INITIALIZER is used to run required logic while an Angular application is starting. In modern Angular, use provideAppInitializer() . The older APP_INITIALIZER token is deprecated. Common Uses Load application configuration Restore the logged-in user Load translations Load feature flags Modern Example import { ApplicationConfig, inject, provideAppInitializer } from '@angular/core'; import { provideHttpClient } from '@angular/common/http'; import { firstValueFrom } from 'rxjs'; export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(), provideAppInitializer( () => { const configService = inject(ConfigService); return firstValueFrom( configService.load() ); } ) ] }; How It Works Application Starts ↓ Initializer Runs ↓ Required Data Loads ↓ Promise Resolves or Observable Completes ↓ Application Initialization Completes Return Types Return Type Angular Behavior void Angular continues immediately Promise Angular waits until it resolves Observable Angular waits until it completes Important Warning Always return the Promise or Observable that Angular must wait for. Wrong: provideAppInitializer( () => { configService.load(); } ); Correct: provideAppInitializer( () => configService.load() ); Do not return an Observable that never completes because application initialization may remain unfinished. Old APP_INITIALIZER Syntax import { APP_INITIALIZER } from '@angular/core'; { provide: APP_INITIALIZER, useValue: initializeApp, multi: true } The older syntax uses multi: true so multiple initializer functions can be registered. Key Point Use an application initializer only for data that must be available before the application can work. Easy Formula Modern Angular = provideAppInitializer() Initializer = Run Startup Logic + Wait for Required Data + Complete Application Startup