🅰️ Angular Intermediate

What is Angular environment configuration?

Answer

Angular's environment configuration system allows different settings for development, staging, and production builds. Traditional approach (pre-Angular 15): create environment files: src/environments/environment.ts (dev): export const environment = { production: false, apiUrl: "http://localhost:3000/api" };. src/environments/environment.prod.ts: export const environment = { production: true, apiUrl: "https://api.example.com" };. Configure file replacements in angular.json: "configurations": { "production": { "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" }] } }. During ng build --configuration production, Angular replaces environment.ts with environment.prod.ts. Angular 15+ approach: environment files still exist but can be omitted in favor of: Application configuration via tokens: inject the API URL via InjectionToken: const API_URL = new InjectionToken<string>("API_URL"); providers: [{ provide: API_URL, useValue: environment.apiUrl }]. Runtime configuration: load config via an HTTP call at startup using APP_INITIALIZER: providers: [{ provide: APP_INITIALIZER, useFactory: (configService: ConfigService) => () => configService.load(), deps: [ConfigService], multi: true }]. This enables configuration without rebuilding (Docker-friendly — inject at deployment time). Best practice: never put secrets in environment files — they end up in the client-side bundle. Use environment variables only for public config (API URLs, feature flags).