title: Cannot read property 'get' of undefined Angular 4
body: <p>I am trying to inject the <code>HttpClient</code>  in my Configuration service like :</p>
  
  <pre><code>import { Http } from '@angular/http';
  import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { environment } from '../../environments/environment';
  
  
  export function config() {
     return new Configuration();
  }
  
  
  @Injectable()
  export class Configuration {
  
      public static createConfiguration(): any {
          return config;
      };
  
      constructor(private http?: HttpClient) {
          debugger;
          if (environment.production) {            
              this.readConfigurations().subscribe(res =&gt; {
                  console.log(res);
              })
  
          }
      }
  
  
  
      readConfigurations() {
          return this.http.get('../../assets/config/config.json')
              .map((res: any) =&gt; {
                  res.json();
              }
              );
      }
  }
  </code></pre>
  
  <p>So, you can see that I have injected the <code>HttpClient</code> in the constructor parameter.</p>
  
  <p>In my app module, I have declared this Configuration under </p>
  
  <p>Providers:</p>
  
  <pre><code>   { provide: Configuration, useFactory: Configuration.createConfiguration(), deps: [] },
  </code></pre>
  
  <p>But, when i am running my application i am getting :</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'get' of undefined
            at Configuration.webpackJsonp.../../../../../src/app/config/configuration.service.ts.Configuration.readConfigurations
    (configuration.service.ts:69)
            at new Configuration (configuration.service.ts:59)
            at config (configuration.service.ts:10)
            at _callFactory (core.es5.js:9552)
            at _createProviderInstance$1 (core.es5.js:9506)
            at resolveNgModuleDep (core.es5.js:9488)
            at _createClass (core.es5.js:9533)
            at _createProviderInstance$1 (core.es5.js:9503)
            at resolveNgModuleDep (core.es5.js:9488)</p>
  </blockquote>
  
  <p>Please help me in what I am doing wrong.</p>
  
  <p>Edit:</p>
  
  <p>App Module:</p>
  
  <pre><code>@NgModule({
    imports: [HttpClientModule],
    declarations: [
      AppComponent,
  
      ],
    providers: [
      Logger, LOG_LOGGER_PROVIDERS,
      { provide: Configuration, useFactory: Configuration.createConfiguration(), deps: [] },
     ],
    bootstrap: [AppComponent]
  })
  </code></pre>