loading MsalModule config in the app.module.ts. Getting error.

Question

User956626884 posted

I am trying to load initial configuration on file to load the following in app.module.ts

  have an angular service which has all the config data based on different environments. 

 Instead of setting one environment setting for MsalModule.forRoot,

 I like to 1st get the configuration data based on the environment and then try to load the MsalModule.

 I am getting a error when I try to use the providers section setting

 { provide: APP_INITIALIZER, useFactory: initializeMyApp, deps: [MyConfigService], multi: true }

Error: StaticInjectorError(AppModule)[InjectionToken Application Initializer -> MyConfigService]: main.ts:12 Failed to load resource: the server responded with a status of 404 (Not Found) [https://localhost:4200/site.json] Manifest: Line: 1, column: 1, Unexpected token. [https://localhost:4200/site.json]

Is this the best way, I like to initialize the Module with predefined values.

 Thanks 

let myConfig = undefined;
export function initializeMyApp(nmyService : MyConfigService ) {
  return (): Promise<any> => nmyService.loadConfig()
      .toPromise()
      .then( config => {
        myConfig = config;
      })
}

imports: [MsalModule.forRoot({ clientID = myConfig.clientID etc... })

providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeMyApp,
      deps: [MyConfigService],
      multi: true
    },
]

When I startup the app, I get the following error

Error: StaticInjectorError(AppModule)[InjectionToken Application Initializer -> MyConfigService]: main.ts:12 Failed to load resource: the server responded with a status of 404 (Not Found) [https://localhost:4200/site.json] Manifest: Line: 1, column: 1, Unexpected token. [https://localhost:4200/site.json]

</div> </div>

Answer 1

User283571144 posted

Hi comicrage,

According to the error message, it seems you don't have set the site.json config in your application, please add the site.json file with below setting:

Config:

clientID: Specifies the Azure AD client id/application Id of the calling web service;
graphScopes: Allows the client to express the desired scope of the access request;
signUpSignInPolicy: Name of the Sign-up or sign-in policy (optional*);
tenant: Url of the tenant xxx.onmicrosoft.com (optional*)
popup: show login popup or redirect (optional, default: true);
navigateToLoginRequestUrl: Ability to turn off default navigation to start page after login. (optional, default: false);
redirectUrl: Location to redirect, can be a relative of absolute url. (optional, default: window.location.href);
callback: Callback function after login;

Besides, you could directly add the AAD auth setting in the MsalModule.forRoot method as below links shows instead of using site.json.

https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/README.md#config-options-for-msal-initialization 

Best Regards,

Brando