How to assign and use runtime config values in App.module in angular


I have a situation where i need to replace some of the hardcoded values with config.json values in the app.module. can we do that ?

am able to add APP_INITIALIZER and useFactory and able to inject service in other components and that is working fine but not able to achieve with in app.module.

I want to replace some of the MSAL client and other properties with runtime config that i created in APP module but it is giving CE.

    let appConfig: ConfigType;
    const appInitializerFn = (configService: ConfigService)=>{
      return () => {
        appConfig = configService.getConfig();
    export function MSALInstanceFactory(configService: ConfigService): IPublicClientApplication {
      return new PublicClientApplication({
        auth: {
          clientId: configService.getConfig().clientId, //I need to replace like this but not working 
          authority: '',
          redirectUri: 'http://localhost:4200'
        cache: {
          cacheLocation: 'localStorage',
          storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
      declarations: [
      imports: [
              provide: APP_INITIALIZER,
              useFactory: appInitializerFn,
              multi: true,
              deps: [ConfigService]
          provide: MSAL_INSTANCE,
          useFactory: MSALInstanceFactory
  bootstrap: [AppComponent, MsalRedirectComponent] // MsalRedirectComponent bootstrapped here
export class AppModule { }

am getting below compile time errors :

rror: src/app/app.module.ts:49:11 – error TS2322: Type ‘string | undefined’ is not assignable to type ‘string’.
Type ‘undefined’ is not assignable to type ‘string’.

49 clientId: appConfig.clientId,

21     clientId: string;

The expected type comes from property ‘clientId’ which is declared here on type ‘BrowserAuthOptions’

Error: src/app/app.module.ts:49:21 – error TS2454: Variable ‘appConfig’ is used before being assigned.

49 clientId: appConfig.clientId,

Source: Angular Questions

Categorized as angular, msal-angular, runtime-configuration Tagged , ,


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us