title: Angular 8 APP_INITIALIZER service start before loading config file
body: <p>I'm having trouble loading config file with Angular APP_INITIALIZER.</p>
  
  <p>Its seem the service started loading with APP_INTIALIZER so the config file is not reach to the service, 
  and its causing error before config file need to set something before service start fire.</p>
  
  <p>this is AppModule</p>
  
  <pre><code>export function load(http: HttpClient, config: AppConfigurationService):
  (() =&gt; Promise&lt;boolean&gt;) {
  return (): Promise&lt;boolean&gt; =&gt; {
      return new Promise&lt;boolean&gt;((resolve, reject): void =&gt; {
          http.get('/assets/config/config.json').
              pipe(
                  map((res: AppConfigurationService) =&gt; {
                      config.defaultLanguage = res.defaultLanguage;
                      config.languages = res.languages;
                      config.title = res.title;
                      config.logo = res.logo;
                      resolve(true);
                  }), catchError((error: { status: number }, caught: Observable&lt;void&gt;): ObservableInput&lt;{}&gt; =&gt; {
                      reject('could not download webpages duo to the application maintenance');
                      return of(error);
                  })
              ).subscribe();
      }).then(res =&gt; {
          if (res) {
              return new Promise&lt;boolean&gt;((resolve, reject): void =&gt; {
                  if (config) {
                      console.log(config, ' config is being produced?');
                      resolve(true);
                  } else {
                      reject('Not Found')
                  }
              });
          }
      });
  };} 
       @NgModule({
  declarations: [
      AppComponent,
      RootComponent,
  ],
  imports: [
      BrowserModule.withServerTransition({ appId: 'serverApp' }),
      TransferHttpCacheModule,
      AppRoutingModule,
      SharedModule,
  ],
  providers: [
      {
          provide: APP_INITIALIZER,
          useFactory: load,
          multi: true,
          deps: [
              HttpClient,
              AppConfigurationService
          ]
      }
  ],
  bootstrap: [AppComponent],
  entryComponents: [
      DialogServiceComponent
  ],}) export class AppModule { }
  </code></pre>
  
  <p>This is where it went wrong</p>
  
  <p>In the AppRoutingModule i'm using CanActive to check if user is allow to pass with some condition</p>
  
  <pre><code>    {
          path: 'home',
          component: homeComponent,
          canActivate: [CheckUserService]
      },
  </code></pre>
  
  <p>CheckUserService is going to check some certain condition on user that logged in the page if not match the MatDialog will appear </p>
  
  <pre><code>if (isLoggedIn) {
          if(!userCondition){
                this.openDialog();
                return true;
             }
             return true;
          }
      } else {
          return true;
      }
  
       openDialog() {
      const dialogRef = 
          this.dialog.open(DialogServiceComponent, {
          width: '1000px',
          panelClass: 'my-dialog',
          disableClose: true
      });
  
      dialogRef.afterClosed().subscribe(result =&gt; {
          console.log(`Dialog result: ${result}`);
      });
  }
  </code></pre>
  
  <p>And in DialogServiceComponent is going to get a config file on AppConfig before it can fire out to API but since the app_initializer is not finished, the error appear because of a config file is not yet done processing.</p>
  
  <p>How do i solve this, i'm quite unsure if this is the proper way to write APP_INITIALIZER </p>