title: APP_INITIALIZER undefined results after page reload
body: <p>I have a simple config service that I've wired with APP_INITIALIZER token in my app.shared.module.ts:</p>
  
  <pre><code> ConfigService,
          {
              provide: APP_INITIALIZER,
              useFactory: (configService: ConfigService) =&gt;
                  () =&gt; configService.getStuff(),
              deps: [ConfigService],
              multi: true
          },
  </code></pre>
  
  <p>This executes the subscription (config.service.ts):</p>
  
  <pre><code>settings: any; 
  
  getStuff() {
      this.getSettings()
          .subscribe(data =&gt; {
              this.settings = data);
          });
  }
  
  getSettings(): Observable&lt;ISettings&gt; {
      return (this.httpClient
          .get&lt;ISettings&gt;(this.localbaseUrl)
          .pipe(
              catchError(this.errorHandlerSerevice.handleError)
          )) as any;
  }
  </code></pre>
  
  <p>Then I inject this service into other services (through their constructors - which I don't like) and everything works fine on the app start:</p>
  
  <pre><code>constructor(){
       this.settings = this.configService.settings;
  }
  </code></pre>
  
  <p>Its fine when I go to the home page and refresh the app from there.
  The logic is called and data returned. 
  However when I refresh a particular page that uses the component and calls the constructor it seems to late for the data to arrive back, hence I get undefined returned here:</p>
  
  <pre><code>this.settings = this.configService.settings;
  </code></pre>
  
  <p>I guess the 'wire up' is wrong... </p>
  
  <p>Any suggestions how to tackle it?</p>