Dynamic configuration for Angular ABP #7616

• ABP Framework version: v7.4.2
• UI Type: Angular
• Database System: EF Core - Postgres
• Tiered (for MVC) or Auth Server Separated (for Angular): yes
• Exception message and full stack trace: N/A
• Steps to reproduce the issue: See below

We are struggling to work out how to get dynamic configuration for ABP to work in our Angular application. We have a set of config values that are populated into a JSON file at build time. I have added a service that runs on app initialisation which does a HTTP GET request to get the JSON values, and then attempt to set the ABP environment. The service code is here:

const existingEnvironmentConfiguration = this.environment.getEnvironment();
this.http
  .get<Environment>(
    existingEnvironmentConfiguration.production
      ? '/assets/appsettings.json'
      : '/assets/appsettings.Development.json'
  )
  .pipe(
    take(1),
    tap(data => {
      console.log('Loading config', data);
      this.environment.setState({
        ...existingEnvironmentConfiguration,
        application: {
          ...existingEnvironmentConfiguration.application,
          baseUrl: data.baseUrl,
        },
        oAuthConfig: {
          ...existingEnvironmentConfiguration.oAuthConfig,
          issuer: data.oAuthConfig.issuer,
        },
        apis: {
          default: {
            url: data.apis.default.url,
          },
          signalr: {
            url: data.apis.signalr.url,
          },
        },
      });
      console.log(this.environment.getEnvironment());
    }),
    takeUntil(this.destroy$)
  )
  .subscribe();

The configuration is correctly loaded and I can see the values are right. I can also see that setState appears to be working. It's registered like so in app.module.ts:

// ...rest of NgModule
providers: [
{
  provide: APP_INITIALIZER,
  useFactory: initConfig,
  deps: [AppConfigService],
  multi: true,
},
{ provide: ErrorHandler, useClass: GlobalErrorHandler },
],
// ...rest of NgModule

However, there are various issues with this:

• ABP is configured in app.module.ts with

CoreModule.forRoot({
  environment,
  registerLocaleFn: registerLocale(),
}),

where the environment is imported from an environment.ts file. This seems to be taking priority over my setState, I believe this is because it's also run at app init.

• Occasionally we will get a infinite loop when trying to login. The error we get is around the nonce value being wrong. This is after the login completion, it thinks it is null and then redirects forever.

We absolutely require the ability to build the Angular application once and provide dynamic configuration to it, however we are struggling massively with this. I am not an expert Angular developer, so it's possible there is something I am missing here. We would like to get some support on this issue as it is a blocker to our go-live. I have seen various GitHub issues on ABP asking for this but they all seem to be out of date.

Please let me know if you require more info.

Thanks in advance.