title: Angular: How to correctly implement APP_INITIALIZER
body: <p>I have a <strong>Angular 5.2.0</strong> application.
  I looked up how to implement <code>APP_INITIALIZER</code> to load configuration information before the app starts.
  Here an extract of the <code>app.module</code>:</p>
  
  <pre><code>providers: [
      ConfigurationService,
      {
          provide: APP_INITIALIZER,
          useFactory: (configService: ConfigurationService) =&gt;
              () =&gt; configService.loadConfigurationData(),
          deps: [ConfigurationService],
          multi: true
      }
  ],
  </code></pre>
  
  <p>Here the <code>configuration.service</code>:</p>
  
  <pre><code>import { Injectable, Inject } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  import { Configuration } from './configuration';
  
  @Injectable()
  export class ConfigurationService {
      private readonly configUrlPath: string = 'Home/Configuration';
      private configData: Configuration;
  
      constructor(
          private http: HttpClient,
          @Inject('BASE_URL') private originUrl: string) { }
  
      loadConfigurationData() {
          this.http
              .get&lt;Configuration&gt;(`${this.originUrl}${this.configUrlPath}`)
              .subscribe(result =&gt; {
                  this.configData = {
                      test1ServiceUrl: result["test1ServiceUrl"],
                      test2ServiceUrl: result["test2ServiceUrl"]        
                  }
              });
      }
  
      get config(): Configuration {
          return this.configData;
      }
  }
  </code></pre>
  
  <p>Here is an example of a constructor of a component where the <code>configData</code> is used:</p>
  
  <pre><code>export class TestComponent {
      public test1ServiceUrl: string;
  
      constructor(public configService: ConfigurationService) {
          this.test1ServiceUrl = this.configService.config.test1ServiceUrl;
      }
  }
  </code></pre>
  
  <p>It works fine with all the components which are defined within the <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code>. But the same implementation in a component outside the <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> does not work.<br>
  When I debug the respective constructor of the component where it does not work it says that <code>configService</code> is <code>null</code>.<br>
  Why is the <code>APP_INITIALIZER</code> executed before the constructor of a component inside the <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> is called but not before the constructor of a component outside the <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code>?</p>