title: NullInjectorError: No provider for "ConfigService"
body: <p>I have 2 modules <em>ConfigModule</em> and <em>LoginModule</em> each has a service <em>ConfigService</em> and <em>LoginService</em>.  The <em>LoginService</em> uses <em>ConfigService</em></p>
  
  <p>My <em>LoginModule</em> </p>
  
  
  
  <pre><code> @NgModule({
     imports: [
       // Angular
       CommonModule,
       HttpClientModule,
       BrowserAnimationsModule,
       FormsModule,
       // Angular Material Flex Layout
       FlexLayoutModule,
       // Angular Material
       MatInputModule,
       MatButtonModule,
       MatIconModule
     ],
     declarations: [
       // Components
       LoginComponent,
       NewUserComponent,
       ForgotPasswordComponent,
       // Directives
       ForbiddenCharactersDirective,
       EquateDirective
     ],
     providers: [
       { // this will activate when you include this module
         provide: HTTP_INTERCEPTORS,
         useClass: AuthHttpInterceptor,
         multi: true
       },
       LoginService
     ],
     schemas: [ NO_ERRORS_SCHEMA ],
     exports: [
       LoginComponent,
       NewUserComponent,
       ForgotPasswordComponent,
       ForbiddenCharactersDirective,
       EquateDirective
     ]
   })
  </code></pre>
  
  <p>My <em>ConfigModule</em></p>
  
  
  
  <pre><code> @NgModule({
     imports: [
       CommonModule,
       HttpClientModule
     ],
     providers: [
       ConfigService,
       {
         provide: APP_INITIALIZER,
         useFactory: initConfig,
         deps: [ConfigService],
         multi: true
       }
     ]
   })
  </code></pre>
  
  <p><em>LoginService</em>'s constructor</p>
  
  
  
  <pre><code> constructor(
     private _http: HttpClient,
     private _configSrvc: ConfigService // &lt;==== Injected ConfigService
   ) {
    // get base url for api endpoints
    let api = this._configSrvc.get('api');
    if(api &amp;&amp; (typeof api === 'string'))
      this.baseUrl = api;
  
    let endpoints = this._configSrvc.get('login.endpoints');
    if(endpoints)
      this._endpoints.endpoints = endpoints;
  } // constructor
  </code></pre>
  
  <p>When I import both modules into my application module</p>
  
  
  
  <pre><code> @NgModule({
     imports: [
       ...,
       ConfigModule,
       LoginModule
     ]
   })
  </code></pre>
  
  <p>and then try to run <code>ng serve</code> or <code>ng serve --preserve-symlinks</code> I get the following error</p>
  
  <pre><code> AppComponent.html:2 ERROR Error: StaticInjectorError(AppModule)[LoginService -&gt; ConfigService]: 
     StaticInjectorError(Platform: core)[LoginService -&gt; ConfigService]: 
       NullInjectorError: No provider for ConfigService!
  </code></pre>
  
  <p>It is my understanding that a provider should be available to the whole application and it's other modules/components/etc if the provider is declared in the providers array of the imported module.  </p>
  
  <p>I don't understand why there is <code>No provider for ConfigService</code> for the <em>LoginService</em> ??</p>
  
  <p>The only thing I can think of is some race situation is occurring where the <em>LoginService</em> is being instantiated either at the same time or before the <em>ConfigService</em> but how do I fix that if that is the culprit?</p>