typescript - Angular - Using the value from an editable config file to define a DI token for a serviceURL

Question

My application currently has a bunch of DI Tokens defined for service URLs that get their value from the environment.ts file. I'm now currently working on trying to get an editable config file in my application, to define things like a serviceBaseURL, which can be used for defining the server location of all services, then using this to concatenate with the existing service DI Tokens. I have written a bit of code, similar to the following:

https://devblogs.microsoft.com/premier-developer/angular-how-to-editable-config-files/

Whereby I am retrieving a bunch of values from an editable .json configuration file, and using APP_INITIALIZER to do this. I have defined this in the providers list of AppModule like so:

{ provide: APP_INITIALIZER, useFactory: loadConfig, deps: [AppConfigService], multi: true }

The factory function I have defined like so:

export function loadConfig(appConfig: AppConfigService) {
  return () => appConfig.load();
}

Which is calling this method:

export class AppConfigService {
  public static settings: AppConfig = null;

  constructor(private http: HttpClient) {}
    
  load() {
    const jsonFile = `assets/config/config.${environment.name}.json`;
    return new Promise<void>((resolve, reject) => {
      this.http
        .get(jsonFile)
        .toPromise()
        .then((response: AppConfig) => {
          AppConfigService.settings = response;
          resolve();
        })
        .catch((response: any) => {
          // eslint-disable-next-line prefer-promise-reject-errors
          reject(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`);
        });
    });
  }
}

This seems to work fine.

One such value I have is "serviceBaseURL". What I now want to do however, is create a new provider/DI Token (amend the existing one's mentioned above) inside of AppModule that uses the value from this config file, and concatenates this with the value from an environment file. Which would ideally looking like the following:

{ provide: API_ACCOUNTS_BASE_URL, useValue: AppConfigService.settings.serviceBase + environment.accountsServiceURL }

However, when running my code, my application seems to be trying to create the API_ACCOUNTS_BASE_URL DI Token before the value of "AppConfigService.settings" is set. Therefore it is undefined.

Is it even possible to create a new DI Token using the value of something that is set from APP_INITIALIZER at the same level?

Alternatively, am I doing this wrong? - Should I be defining the other DI Tokens somewhere further downstream or something else?

Answer 1

等待大神答复