Loading config on APP_INITIALIZER about ng-oidc-client

[malled]

Not a complete example, but these are the relevant parts:

export var OIDC_CONFIG_TOKEN = new InjectionToken<Config>("forRoot() OidcConfig configuration.");
export function provideOidcConfigFactory(): Config {
  var config = { oidc_config: OidcSettings.getOidcSettings() };
  return (config);
}

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    StoreModule.forRoot({}),
    EffectsModule.forRoot([OidcEffectsService]),
    NgOidcClientModule,
    ...
  ],
  exports: [
    ...
  ],
  providers: [
    ...,
    {
      provide: OIDC_CONFIG_TOKEN,
      useValue: {}
    },
    {
      provide: OIDC_CONFIG,
      useFactory: provideOidcConfigFactory,
      deps: [OIDC_CONFIG_TOKEN]
    }
  ]
})
export class Module {
}

[malled]

I need this, too. Any chance to implement this?

Edit: You can use this workaround in the meantime:
https://www.bennadel.com/blog/3565-providing-module-configuration-using-forroot-and-ahead-of-time-compiling-in-angular-7-2-0.htm
This allows to load the config on app startup.

[10aud]

I can see how this example relates to a custom made module. Do you have an example of this working with ng-oidc-client?

[Kumar-Aakash]

@malled Hi, I am also trying to load External configuration file from a JSON file and then passing those values to forRoot of NgOidcClientModule. I saw your solution but I am not understanding it. Few questions:

1. Is it a separate Module you created in the above-mentioned comment?
2. How you are adding it again in the app.module and accessing your external config file Via other services?
3. What are OidcEffectService and OidcSettings? OidcSettings is a component which is loading configuration?

Thanks in advance.

[malled]

I've created a minimal example (not tested):
https://github.com/malled/ng-oidc-example

1. in the example it's not a module but it doesn't matter if.
2. config is read in app.module with getOidcSettings; could be anything you want
3. OidcSettings was a component I used to load settings, removed it for the example. OidcEffectService was used in EffectsModule.forRoot([]), but I'm not using it anymore because I couldn't get it working.

Edit: @aakash1401 I had a closer look, loading config changes while the application is running is not possible with my example. It just allows you to load a custom configuration once on startup. Please share if you find a solution to load it dynamically while the application is running.

[Kumar-Aakash]

@malled What did you do inside getOidcSettings() method. We need to call a HTTPClient API to fetch it dynamically there. Did you do something similar or you accessing from environment.ts file? Can you please share your getOidcSettings() so I will get an idea.

Mine is working but not dynamically. I am fetching config file in main.ts using fetch like this:

(async () => {
  const response = await fetch('./assets/application-config.json');
  const config = await response.json();
  environment['config'] = config;
  environmentProd['config'] = config;

  platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

})();

Then I am accessing environment in getOidcSettings() to assign values.

[malled]

I am reading config file from local storage:

export class OidcSettings {
    static getOidcSettings(): UserManagerSettings {
        var settings = OidcSettings.loadSettings(...);

        return {
            authority: OidcSettings.issuerUrl(settings),
            client_id: '...',
            redirect_uri: window.location.origin + '/callback.html',
            response_type: 'code',
            scope: 'openid profile offline_access',
            post_logout_redirect_uri: window.location.origin + '/signout-callback.html',
            silent_redirect_uri: window.location.origin + '/renew-callback.html',
            automaticSilentRenew: true,
            client_secret: "...",
        }
    }

    static loadSettings<T>(type: Type<T>, name: string): T {
       if (!name || name === "") { throw "The provided string to load local settings was empty! Loading settings with an empty key is permitted" }
        let storedObject = new type();
        let tryParse: T = JSON.parse(localStorage.getItem(name));
        if (tryParse) {
            for (let [key, value] of Object.entries(tryParse)) {
                storedObject[key] = value;
            }
        }
        return storedObject;
    }

    static issuerUrl(loginSettings: LoginSettings): string {
        // builds up url, e.g. "https://tld:port/
    }
}

Would be great if we could reload these settings dynamically. But the way ng-oicd injects the config makes it hard for me to achieve this.

[Kumar-Aakash]

@malled That's correct. Same problem. This whole Injects and providers flow affects what we want to achieve. I will let you know once I find a solution. Please tell me also if you find it earlier. Thank you.

[buzzbonner24]

Did anyone find a solution to this problem? I also need to load the configuration at run-time.