How to provide runtime environment configuration with APP_INITIALIZER and InjectionToken in...

I’m building an Angular app where I need to load runtime configuration (from a JSON file) before the app starts and provide it using an InjectionToken (ENVIRONMENT).

Here’s my setup:

app.module.ts

declarations: [AppComponent],
imports: [
CoreModule.forRoot({
environment: {}
}),
],
providers: [
RuntimeConfigService,
{
provide: APP_INITIALIZER,
multi: true,
useFactory: (cfg: RuntimeConfigService) => () => cfg.loadConfig(),
deps: [RuntimeConfigService],
},
{
provide: ENVIRONMENT,
useFactory: (cfg: RuntimeConfigService) => cfg.getConfig(),
deps: [RuntimeConfigService],
},
]
})
export class AppModule {}


core.module.ts

imports: [MatDialogModule],
})
export class CoreModule {
static forRoot(config: { environment: Environment }): ModuleWithProviders<CoreModule> {
return {
ngModule: CoreModule,
providers: [
{ provide: ENVIRONMENT, useValue: config?.environment },
],
};
}
}


runtime-config.service.ts

export class RuntimeConfigService {
private _config: Environment | null = null;

constructor(private http: HttpClient) {}

loadConfig(): Promise<void> {
return firstValueFrom(this.http.get<Environment>('/config/config.json'))
.then(config => {
this._config = config;
})
.catch(() => {
console.warn('Could not load runtime config, using default');
this._config = {} as Environment;
});
}

getConfig(): Environment {
if (!this._config) {
throw new Error('Runtime config not loaded yet!');
}
return this._config;
}
}


Problem

The issue is that when I use this code to provide ENVIRONMENT:

{
provide: ENVIRONMENT,
useFactory: (cfg: RuntimeConfigService) => cfg.getConfig(),
deps: [RuntimeConfigService],
}


How can I properly delay providing ENVIRONMENT until APP_INITIALIZER has finished loading the runtime config?

Continue reading...