I encountered a similar issue in the past and after exploring various options unsuccessfully, I found that utilizing ngrx/store was the only viable solution.

Within app.config.ts, you can trigger an action to store the configuration data and access it in other services by using: store.select(), subscribing to it, and managing your workflow accordingly.

app.module.ts

providers: [
  AuthService, // referring to oidc-client.ts where the JSON config is needed
  DataService,
  ConfigService,
  {
    provide: APP_INITIALIZER,
    useFactory: loadConfig,
    deps: [ConfigService],
    multi: true,
  },

config.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import { IAppStore } from '../models/store.model';
import * as ConfigActions from '../store/actions/config.actions';

@Injectable()
export class ConfigService {
  public config: any = {};

  constructor(private http: HttpClient, private store: Store<IAppStore>) {}

  getConfig(key: string): string {
    return this.config[key] || '';
  }

  public loadConfig() {
    return new Promise((resolve, reject) => {
      this.http.get('app-config.json').subscribe(
        (response) => {
          this.config = response;
          this.store.dispatch(new ConfigActions.AddConfig(response)); // dispatching action to update the store
          resolve(true);
        }
      );
    });
  }
}

AuthService

import { Log, User, UserManager, WebStorageStateStore } from 'oidc-client';
...
@Injectable()
export class AuthService {
  private _userManager: UserManager;
  public _user: User;

  constructor(
    private store: Store<IAppStore>,
    private httpClient: HttpClient,
    private route: Router,
    private configs: ConfigService
  ) {
    this.store.select('appConfig').subscribe((configdata) => {
      Log.logger = console;
      const config = {
        authority: configdata.stsAuthority,
        client_id: configdata.clientId,
        redirect_uri: `${configdata.clientRoot}/#/auth-callback#`,
        scope: 'openid profile fusionApi.full_access',
        response_type: 'id_token token',
        post_logout_redirect_uri: `${configdata.clientRoot}?postLogout=true`, // clear stored tokens after logout
        userStore: new WebStorageStateStore({ store: window.localStorage }),
        automaticSilentRenew: true,
        silent_redirect_uri: `${configdata.clientRoot}/assets/html/silent-refresh-redirect.html`,
      };
      this._userManager = new UserManager(config);
      this._userManager.getUser().then((user) => {
        if (user && !user.expired) {
          this._user = user;
        }
      });
    }
  }

  login(): Promise<any> {
    return this._userManager.signinRedirect();
  }
  ...

I encountered a similar issue and successfully resolved it.

module-factory:

import { InjectionToken } from '@angular/core';
import { HttpClient, HttpBackend } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { AuthorizationService } from './authorization.service';

export const AUTH_CONFIG = new InjectionToken<string>('auth.config.path', {
    factory: () => 'config.json',
  });


  export function VerifyAuthorizationState(handler: HttpBackend, authService: AuthorizationService, path: string) {
    return async () => {
      const http = new HttpClient(handler);
      // retrieve configuration for authorization
      await http.get(path)
        .pipe(
          map((response: any) => {
            authService.init(response);
          })
        ).toPromise();
      // check authorization status
      await authService.checkAuthorization();
    };
  }

module:

import { NgModule, APP_INITIALIZER, ModuleWithProviders, InjectionToken } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthorizationService } from './authorization.service';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthorizationGuardService } from './authorization-guard.service';
import { AuthorizationInterceptor } from './authorization-interpretator';
import { HttpBackend, HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { VerifyAuthorizationState, AUTH_CONFIG } from './module-factories';

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    AuthorizationService,
    AuthorizationGuardService,
    {
      provide: APP_INITIALIZER,
      useFactory: VerifyAuthorizationState,
      deps: [HttpBackend, AuthorizationService, AUTH_CONFIG],
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthorizationInterceptor,
      multi: true
    }
  ],
  declarations: []
})

export class AuthorizationModule {
  static forRoot(path: string): ModuleWithProviders {
    return {
      ngModule: AuthorizationModule,
      providers: [
        { provide: AUTH_CONFIG, useValue: path }
      ]
    };
  }
}

Sharing my authorization library with you: https://www.npmjs.com/package/sso-authorization-oidc-client

Today, I encountered an issue and found a solution that may be beneficial to others.

This resolution is particularly related to the use of angular-oauth2-oidc.

export const oauthModuleConfigFactory = (config: AppConfig): OAuthModuleConfig => ({
    resourceServer: {
        allowedUrls: [config.apiUrl],
        sendAccessToken: true
    }
});

// An adjustment for App Initializers issue
const fixForAppInitializers = ({ ngModule, providers = [] }: ModuleWithProviders<any>) => ({
    ngModule,
    providers: [...providers.filter((value: any) => value.provide !== OAuthModuleConfig)]
});

@NgModule({
    imports: [fixForAppInitializers(OAuthModule.forRoot())],
    providers: [
        AuthGuard,
        { provide: OAuthModuleConfig, useFactory: oauthModuleConfigFactory, deps: [APP_CONFIG] },
        ...
    ]
})
export class AuthModule { }

However, this alone was not sufficient as OAuthModule's DefaultOAuthInterceptor needed access to OAuthModuleConfig, which in turn required data from app.config.json. To resolve this dependency chain, I implemented the following workaround:

// Using HttpXhrBackend service instead of HttpClient to avoid injection issues
@Injectable()
export class AppConfigLoader {

    private _config: AppConfig | undefined;

    public constructor(
        private readonly httpClient: HttpXhrBackend
    ) { }

    public get config(): AppConfig {
        if (!this._config) {
            throw new Error('config is not loaded');
        }
        return this._config;
    }

    public async load(): Promise<void> {
        const request = this.createJsonRequest<AppConfig>(`${window.location.origin}/app.config.json`);
        this._config = await this.httpClient.handle(request).pipe(
            filter(event => event instanceof HttpResponse),
            map((response: any) => response.body)
        ).toPromise();
    }

    private createJsonRequest<T>(url: string): HttpRequest<T> {
        return new HttpRequest<T>('GET', url, { headers: new HttpHeaders({ 'content-type': 'application/json' }) });
    }
}

I encountered a similar issue and found that the OAuthModuleConfig needs to be configured synchronously. This means that the settings must be loaded before creating the OAuthModuleConfig, ideally in a factory function.

To address this, I made sure to fetch the settings prior to bootstrapping the AppModule.

Main.ts:

fetch('/assets/config.json')
.then(response => response.json())
.then(config => {

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic([{ provide: APP_SETTINGS, useValue: config }])
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));
});

App.module.ts:

Within the module declaration:

....
providers: [
{ provide: OAuthModuleConfig, useFactory: authConfigFactory, deps: [APP_SETTINGS] },
],
bootstrap: [AppComponent]
.....


export function authConfigFactory(settings: AppSettings): OAuthModuleConfig {
return {
resourceServer: {
    allowedUrls: settings.protectedUrls,
    sendAccessToken: true,
   }
 };
}