In an Angular app, how would you load settings from /config.json at runtime so every service sees them before the app starts?

## Why load configuration at runtime Angular's environment files are compiled into the bundle, so the API URL or feature flags they hold are fixed per build. Many teams instead want **build once, deploy many**: the same artifact is promoted from test to staging to production, and each environment serves its own `config.json` next to `index.html`. The browser then has to fetch that file before the application uses any of its values, which is exactly what an **application initializer** is for. ## The standard recipe 1. Define an `AppConfig` interface describing the file. 2. Create a `ConfigService` provided in root that holds the loaded values and exposes typed getters. 3. Give it a `load()` method that fetches `/config.json` and stores the result, returning a Promise. 4. Register `provideAppInitializer(() => inject(ConfigService).load())` in `ApplicationConfig`, together with `provideHttpClient()`. 5. Inject `ConfigService` wherever a value is needed and read it synchronously. Because Angular awaits the Promise returned by the initializer, the root component is created only after `load()` resolves. Components, and the services they inject when they are constructed, therefore see a filled service. ```ts async load(): Promise<void> { this.config = await firstValueFrom(this.http.get<AppConfig>('/config.json')); } ``` `firstValueFrom` from RxJS turns the one-shot HTTP Observable into a Promise. Returning the Observable directly would also work, because Angular waits for an Observable initializer to complete and `HttpClient` requests complete after the response. ## Reading the values Once loaded, the configuration does not change for the lifetime of the page, so consumers can read it **synchronously** through getters or a readonly signal; there is no need to expose it as an Observable that every consumer subscribes to. Typed getters also keep the file's shape in one place: when the JSON gains a field, only `AppConfig` and the service change. If a value is optional, give the getter an explicit default rather than letting `undefined` leak into URLs. ## What "before the app starts" does and does not cover The guarantee is about the **root component**. Some code runs earlier or alongside: - **Environment initializers** run when the root injector is created, before any application initializer, so anything they touch sees an empty `ConfigService`. - **Other application initializers** are called in the same pass; an initializer that reads config synchronously, or whose async work does not wait for `load()`, can run ahead of it. - **Services instantiated during the initializer phase** — for example something an HTTP interceptor injects while the config request is in flight — are constructed before the values exist, so they must read config lazily rather than copy it in a constructor. A getter that throws when the config is missing turns these ordering bugs into a clear error instead of a silent `undefined` URL. ## Two ways to make values available | Approach | How it works | Strength | Cost | |---|---|---|---| | `provideAppInitializer` + config service | Initializer awaits `load()`; consumers inject the service | Idiomatic, uses `HttpClient` and its interceptors, testable with DI | Values exist only after the phase; early readers must be careful | | Fetch before `bootstrapApplication` | `main.ts` calls `fetch('/config.json')`, then bootstraps with the result as a provided value | Config is a plain value from the very first provider; no ordering window | Outside Angular: no `HttpClient`, no interceptors, handle errors in `main.ts` yourself | The second option suits values that provider factories themselves need, such as a base URL passed into another library's setup function; the first suits most application settings. ## Making it safe - **Fail loudly or fall back deliberately.** A rejected `load()` rejects bootstrap: nothing renders and the error reaches the `ErrorHandler`. Decide whether a missing file should stop the app or fall back to defaults, and show the user something either way. - **Bound the wait.** Angular has no startup timeout; a hanging request means a blank page. An RxJS `timeout()` on the request makes it fail instead. - **Avoid caching the file.** Serve `config.json` with headers that prevent stale caching, or a deploy may run with the previous environment's values. - **Keep it small.** Every millisecond the initializer takes delays first render for every visitor. - **Do not put secrets in it.** The file is public to anyone who can open the site. ## Testing In a unit test you normally do not run the initializer at all: provide a stub `ConfigService` or set its values directly, so tests do not depend on an HTTP call happening during `TestBed` setup.