🅰️ Angular Intermediate

What is Angular environment configuration?

Why Interviewers Ask This

This tests whether you can apply Angular knowledge to real-world scenarios. Interviewers are looking for clarity of thought and evidence that you've encountered this in production code.

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).

Pro Tip

If you're unsure about a detail, say so honestly and explain your reasoning. Interviewers respect candidates who can think through uncertainty rather than bluffing.