Angular APP_INITIALIZER application configuration initialized slowly

Question

I am using Angular 8. My AppModule has config like so

{
provide: APP_INITIALIZER,
useFactory: initConfig,
deps: [AppConfigService],
multi: true,
}

with factory function like

export function initConfig(appConfig: AppConfigService) {
 return () => appConfig.loadConfig();
 }

loadCofig function definition is like this

  public loadConfig() {
return this.http.get(environment.config,{responseType: 'text'})
  .toPromise()      
  .then((configVal: any) => {          
    this.config = this.extractData(configVal);        
  })
  .catch((err: any) => {        
    console.error(err);
  });
}

we also have this function to retrive the initialized config values throughout the application

 getConfig() {    
  return this.config;
 }

I am using MSAL library MSAL V1 for angular 8 and i am using platformBrowserDynamic method to initialize

The problem is that when i clear cache and load the app loadConfig asynchronous call is taking time, but before that sidebar component is trying to access config of AppConfigService which is still not initalized so first time page load is failing.

But after reload everything is working fine.

It may not be major issue. But still i tried to eliminate this error using following code

public loadConfig() {
let innerfunc = async  () => {
try {
     let response = await fetch(environment.config);    
     let configtext = await response.text();
     this.config = await this.extractData(configtext);
    }
    catch(err){
      console.error(err);
    }
  }
innerfunc();
}

my routing config looks like this

{
path: 'dashboard',
canActivate: [MsalGuard,AuthService],
loadChildren: () => import('./lazymodules/dashboard/dashboard.module').then(m => 
 m.DashboardModule)
 }

But now with this second implementation strange thing is happening. During very first page load from root paht everything is fine. but after that in all page loads getConfig() returns undefined but in former implementation it returns proper config object.It seems like in second implementation of loadConfig, loadConfig is called more than once.It is called at later point after sidebar is trying to access config object. can anyone help me to understand what's happening. In first implementation How its working properly and executed only one. In second implementation why config object is not initalized properly and available through out the app

Answer 1

The difference between the first and the second implementation is that in the second one you don't return a promise, try to do something like this

async loadConfig() {
    try {
       let response = await fetch(environment.config);    
       let configtext = await response.text();
       this.config = await this.extractData(configtext);
    } catch(err){
       console.error(err);
    }
  }
}

load config return now a promise and you can use like you wrote before

export function initConfig(appConfig: AppConfigService) {
   return () => appConfig.loadConfig();
}