Environment Configuration: Build-Time vs Runtime Config

Angular apps often run in multiple environments: - local dev - staging - production You usually need different values: - API base URL - analytics keys - feature flags ## Option A: Build-time environments (simple) Use `environment.ts` files. Angular replaces them per configuration. Pros: - easy - fast Cons: - you must rebuild for every environment ## Option B: Runtime config (best for many environments) Load a JSON config at runtime like: `/assets/config.json` Then your same build can be deployed anywhere by changing config. ### Example runtime config idea ```ts export type AppConfig = { apiBaseUrl: string }; let config: AppConfig; export async function loadConfig() { const res = await fetch('/assets/config.json'); config = await res.json(); } export function getConfig() { return config; } ``` ### Bootstrapping after config loads You call `loadConfig()` before `bootstrapApplication`. ## When runtime config is worth it - lots of environments (like your 80+ env style) - same build deployed repeatedly - DevOps wants config changes without rebuilding > Next: Testing, unit tests vs integration tests and where Angular fits.