config.json and using values in app.module.ts providers

Question

Currently, we are building our angular (v15) application once for each environment we deploy to, since we are using the environment.ts files to handle variable transforms.

I would like to get us to a flow more similar to our backend, AspNetcore, with it's appsettings.json transformations.

Now reading from a JSON file and swapping the tokens is easy enough, but I am struggling with how we can use the values from the JSON file during application start, particularly when defining our NSWAG API Url tokens.

For example: { provide: AUTH_API_BASE_URL, useValue: environment.auth_api_url },

From the reading and research I've done, the code should look something like this:

export function initApp(http: HttpClient) {
  return () => {
    return http.get('assets/config/configuration.json')
      .toPromise()
      .then((resp) => {
        console.log('Response 1 - ', resp);
      });
  };
}

    providers: [
      {
        provide: APP_INITIALIZER,
        useFactory: initApp,
        multi: true,
        deps: [HttpClient]
      },
      { provide: AUTH_API_BASE_URL, useValue: <needs to change> },

Now, the logging in the above example works and contains everything I would want. I have tried creating a variable, and a static variable to hold the data, I have also tried using classes declared as dependencies in both providers to try and shuffle the data long so I could use in when declaring the AUTH_API_BASE_URL provider. Every time it comes out as undefined.

I'm not sure if it's a timing issue, I've tried setting the AUTH_API_BASE_URL to useFactory with a timeout before getting the value, still no luck.

Is there a way to force it to wait for the APP_INITIALIZER to completely finish before moving onto the next one?

Is there a way to set these providers outside of initial app startup? The following wasn't changing anything for me:

Injector.create({providers: [{provide: AUTH_API_BASE_URL, useValue: settings.apiUrls.base_auth_api_url}]});

Is there a working way of passing these data between this initial providers? Outside of setting these Base API URLs, what I have now should work for the rest of the application.

Answer 1

Apparently, you can just straight import JSON files with a few tweaks to your tsconfig.

TSConfig - add to "compilerOptions:

"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true

Changed provider setup like so:

 { provide: API_BASE_URL, useFactory: (settings: AppSettings) => settings.settings.apiUrls.base_api_url, deps: [AppSettings]},

Service wrapper around JSON file looks like:

import appSetting from '../assets/config/configuration.json';

@Injectable({ providedIn: 'root' })
export class AppSettings {
  public settings!: IAppConfig;
  constructor() {
      this.settings = appSetting as IAppConfig;
  }
}

Will probably end up creating both a static Settings and a non-static Settings varialbe on the service class. The non-static one is needed during application start it seems.