There is another approach available here. While @yurzui's solution works, it relies on the use of useFactory, which can make the code more complex and difficult to comprehend.

The necessity for useFactory arises because Angular executes the @NgModule decorators as soon as the AppModule is imported in main.ts, before the configuration is loaded. To address this issue, I chose to load the configuration even earlier by incorporating a script in the scripts section of angular.js. Here's how:

src/config/load.js:

// This file is included in the scripts section of 'angular.json' to run prior to Angular bootstrap process.
// Its purpose is to fetch application configuration from JSON files.
(() => {
  const fetchSync = url => {
    // The following code may trigger a warning: "[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.",
    // However, we ignore this warning as we need the configuration set before Angular bootstrap process.
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, false);
    xhr.send(null);
    return JSON.parse(xhr.responseText);
  };

  // Configuration fetched is attached to the global 'window' variable for later access from Angular.
  window.configuration = {
    ...fetchSync('config/config.base.json'),
    ...fetchSync('config/config.local.json'),
  };
})();

angular.json:

  // ...
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        // ...
        "assets": [
          // ...
          "src/config/config.base.json",
          "src/config/config.local.json"
        ],
        "scripts": ["src/config/load.js"],
  // ...

src/config/configuration.ts:

import get from 'lodash/get';

export class Configuration {
  // Retrieve the configuration using the 'window.configuration' property set earlier by 'config/load.js'.
  private static value = (window as any).configuration;

  /**
   * Obtain configuration value.
   * @param path The path of the configuration value. Use '.' for nested values.
   * @param defaultValue Value returned if the specified path does not exist.
   * @example
   * const baseUrl = Configuration.get<string>('apis.github.baseUrl');
   */
  static get<T>(path: string, defaultValue?: T): T {
    return get(Configuration.value, path, defaultValue);
  }
}

Now you can utilize it like this:

OAuthModule.forRoot({
  resourceServer: {
    allowedUrls: Configuration.get('allowedUrls')
    sendAccessToken: true
  }
}),

If you encounter issues with lodash, refer to this link.

Aside from @yurzui's response, if you decide to run this in Ahead-Of-Time compilation (e.g. using ng build --prod), you may encounter

ERROR in Error found during template compilation of 'AppModule' Function expressions are not accepted in decorators within 'AuthModule' The issue lies within 'AuthModule' at src\app\core\auth.module.ts(29,23) It is advised to convert the function expression into an exported function.

Thus, we need to create an exported function for the factory:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { OAuthModule, OAuthModuleConfig } from 'angular-oauth2-oidc';
import { HttpClientModule } from '@angular/common/http';
import { environment } from '../environments/environment';

export function oAuthConfigFactory() : OAuthModuleConfig {
  return {
    resourceServer: {
      allowedUrls: [environment.servers.apiServer],
      sendAccessToken: true
    }
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    OAuthModule.forRoot(),
  ],
  providers: [
    {
      provide: OAuthModuleConfig,
      useFactory: oAuthConfigFactory
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

I wanted to share a solution that I successfully implemented in a project of mine a few months back.

    @NgModule({
      imports: [
        ...
        OAuthModule.forRoot({
          resourceServer: {
            allowedUrls: GetApiUrl(), // <== This value is loaded from an external endpoint (JSON)
            sendAccessToken: true
          }
        }),
        ...
      ],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    
    export function GetApiUrl() {
      const jsonFile = `assets/config.dev.json`; //path to config file
      var request = new XMLHttpRequest();
      request.open('GET', jsonFile, false);  // get app settings
      request.send(null);
      const response = JSON.parse(request.responseText);
      return response.ApiUrl;
  }

1. Step 1, Create a function similar to GetApiUrl().
2. Retrieve the Json file synchronously using XMLHttpRequest.
3. Extract the api url from the response object.
4. Use the GetApiUrl() function whenever you need to insert the api url.

Note: If using an external json file, provide the complete URL to the file. In my case, the json file was within the project so I used its path directly.