How can I use runtime configuration in Angular 15, so I can also provide values in AppModule imports?

Question

I am breaking my head for 2 days now to find a way I could read a config.json file in my assets folder.

I tried reading this file while bootstrapping in main.ts so I could somehow use the value in my AppModule in a block like this:

imports: [ ...

AuthModule.forRoot({
  config: {
    authority: 'https://xxxxxxx',
    clientId: 'xxxxxxxxx',
    logLevel: LogLevel.Debug,
    postLogoutRedirectUri: window.location.origin,
    redirectUrl: window.location.origin,
    responseType: 'code',
    scope: 'openid profile email offline_access',
    secureRoutes: ['THIS_IS_WHERE_I_WANT_TO_ADD_THE VALUE_IN_MY_CONFIG_FILE'],
    silentRenew: true,
    useRefreshToken: true
  }
}),

...

I am able to read it in my main.ts and provide the value to the application. I just cannot find a way to use it in the imports array of the App module.

I tried environments but I got stuck on NX project.json not supporting the fileReplacement any more, and a lot of sites suggest environments should not be the way to go, because you do not want to make a separate build just for each environment (while the only difference is just a couple of settings)

So trying runtime configuration, which sounds ideal. I tried many suggested articles about using APP_INITIALIZER or fetching json in main.ts with plain javascript because at that point there is no framework loaded yet.

And all these runtime options actually worked, in that the config data can be accessed a a singleton thoughout the application. Just only not at my specific place in the AppModule, where some modules need to eagerly be passed some config data forRoot.

Just to understand what you mean by: "Just only not at my specific place in the AppModule, where some modules need to eagerly be passed some config data forRoot" - you mean that Angular complains about the data not being statically analysable at compile time. Have you tried using a factory instead of .forRoot call? Maybe you could provide SecureRouteToken with a factory (useFactory) that would be read in the AuthModule? — kvetis, Apr 27 '23 at 08:31

score 0 · Answer 1 · answered Apr 25 '23 at 11:05

I'm not going to directly answer your question on how to load config file.

The way we're working with multiple environments is that we include all configuration in a single build and the we decide which to use based on the domain on which the application is running. We don't use SSR so it is really simple and saves us a lot of time, because we do not need to rebuild for each env nor deploy different config files to different environments and then wait for the conf to load.

function determineEnvironment() {
  const domain = window.location.hostname;
  switch (domain) {
    case 'www.example.com':
    case 'prod.localhost':
      return prodEnvironment;
    case 'test.example.com':
    case 'test.localhost':
      return testingEnvironment;
    case 'demo.example.com':
    case 'demo.localhost':
      return demoEnvironment;

Thanks, I see what you're doing. It doesn't fix my issue, I want to use a config file in my assets folder and somehow pass data to other modules that are eagerly loaded, without using environment.ts. — Richard Noya, Apr 25 '23 at 20:13

How can I use runtime configuration in Angular 15, so I can also provide values in AppModule imports?

1 Answers1