How to populate Adal8Service 's configOptions using config settings in Angular 7 and load when the application loads

I am using import { Adal8Service, Adal8HTTPService } from 'adal-angular8'; for Azure authentication. I am using the below in app.module.ts:

export function appInit(appConfigService: AppInitService) {  return (): any => {    appConfigService.getApplicationConfig().subscribe((res) =>{      sessionStorage.setItem("appConfig",JSON.stringify(res));      timeout(500);    });  }}

my getApplicationConfig() is below:

public getApplicationConfig() {    return this.http.get('assets/config.json');}

and in the providers [] the below:

 AuthenticationService,    AppInitService,    {      provide: APP_INITIALIZER,      useFactory: appInit,      deps: [AppInitService],      multi: true    },    Adal8Service,     { provide: Adal8HTTPService,       useFactory: Adal8HTTPService.factory,       deps: [HttpClient, Adal8Service],      multi: true     },

The here is the appInit function does not block (even removing the timeout()) the application loading and proceeds to to the this.adalService.init(this.adalConfig); this.adalService.handleWindowCallback();(where this.adalConfig = sessionStorage.getItem("appConfig")).

If I refresh the page, then I am getting redirected to the Azure Ad login page properly or if I am hardcoding the configOptions of the this.adalService.init("HARDOCDE all values") then it works fine. How do I make the application block the configuration. I am storing the config values under /assets/config.json. I am not sure what I am doing wrong here. I did try reading the "json" file, but again I have to change it before proceeding to production. How do I make the application wait, there are also other config values for the application stored in the /assets/config.json file. Is the way I use the APP_INITIALIZER correct? Please point me to right direction.