title: Angular (v5) service is getting constructed before APP_INITIALIZER promise resolves
body: <p>I'm expecting Angular to wait until my <code>loadConfig()</code> function resolves before constructing other services, but it is not.</p>
  <p><strong>app.module.ts</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>export function initializeConfig(config: AppConfig){
      return () =&gt; config.loadConfig();
  }
  
  @NgModule({
       declarations: [...]
       providers: [
            AppConfig,
           { provide: APP_INITIALIZER, useFactory: initializeConfig, deps: [AppConfig], multi: true }
       ] })
  export class AppModule {
  </code></pre>
  <p>}</p>
  <p><strong>app.config.ts</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>@Injectable()
  export class AppConfig {
  
      config: any;
  
      constructor(
          private injector: Injector
      ){
      }
  
      public loadConfig() {
          const http = this.injector.get(HttpClient);
  
          return new Promise((resolve, reject) =&gt; {
              http.get('http://mycoolapp.com/env')
                  .map((res) =&gt; res )
                  .catch((err) =&gt; {
                      console.log(&quot;ERROR getting config data&quot;, err );
                      resolve(true);
                      return Observable.throw(err || 'Server error while getting environment');
                  })
                  .subscribe( (configData) =&gt; {
                      console.log(&quot;configData: &quot;, configData);
                      this.config = configData;
                      resolve(true);
                  });
          });
      }
  }
  </code></pre>
  <p><strong>some-other-service.ts</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>@Injectable()
  export class SomeOtherService {
  
      constructor(
          private appConfig: AppConfig
      ) {
           console.log(&quot;This is getting called before appConfig's loadConfig method is resolved!&quot;);
      }
   }
  </code></pre>
  <p>The constructor of <code>SomeOtherService</code> is getting called before the data is received from the server. This is a problem because then the fields in <code>SomeOtherService</code> do not get set to their proper values.</p>
  <p><strong>How do I ensure <code>SomeOtherService</code>'s constructor gets called only AFTER the <code>loadConfig</code>'s request is resolved?</strong></p>