title: angular 5: Cannot read property 'intercept' of undefined at HttpInterceptorHandler.handle
body: <p>We are getting error after updating to angular 5: Console error: "ERROR TypeError: Cannot read property 'intercept' of undefined at HttpInterceptorHandler.handle (http.js:1777)......"</p>
  
  <p>"Unhandled Promise rejection: Cannot read property 'intercept' of undefined ; Zone:  ; Task: Promise.then ; Value: TypeError: Cannot read property 'intercept' of undefined"</p>
  
  <p>Service code</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'
  import { Observable } from 'rxjs/Observable';
  
  @Injectable()
  export class HttpInterceptorService implements HttpInterceptor {
  
    constructor(){}
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      return next.handle(authReq);
    };
  
  
  
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpClientModule, HttpClient } from "@angular/common/http";
  import { HTTP_INTERCEPTORS } from '@angular/common/http';
  
  import { AppComponent } from './app.component';
  import { AppRoutingModule } from './app-routing.module';
  import { LoginModule } from './login/login.module';
  import { SharedModule } from './shared/shared.module';
  import { HttpInterceptorService } from './shared/auth/http-interceptor.service';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule
    ],
    providers: [{
      provide: HTTP_INTERCEPTORS,
      useFactory: HttpInterceptorService,
      multi: true,
    }],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>"dependencies": {
      "@angular/animations": "5.0.1",
      "@angular/common": "5.0.1",
      "@angular/core": "5.0.1",
      "@angular/forms": "5.0.1",
      "@angular/http": "5.0.1",
      "@angular/platform-browser": "5.0.1",
      "@angular/platform-browser-dynamic": "5.0.1",
      "@angular/platform-server": "5.0.1",
      "@angular/router": "5.0.1",
      "@ngx-translate/core": "8.0.0",
      "@ngx-translate/http-loader": "2.0.0",
      "bootstrap-sass": "3.3.7",
      "core-js": "2.4.1",
      "font-awesome": "4.7.0",
      "ngx-bootstrap": "1.7.1",
      "ngx-cookie": "1.0.1",
      "rxjs": "5.5.2",
      "zone.js": "0.8.4"
    },
    "devDependencies": {
      "@angular/cli": "1.5.0",
      "@angular/compiler": "5.0.1",
      "@angular/compiler-cli": "5.0.1",
      "@angular/language-service": "5.0.1",
      "@types/jasmine": "2.5.45",
      "@types/node": "6.0.60",
      "codelyzer": "3.0.1",
      "jasmine-core": "2.6.2",
      "jasmine-spec-reporter": "4.1.0",
      "karma": "~1.7.0",
      "karma-chrome-launcher": "2.1.1",
      "karma-cli": "1.0.1",
      "karma-coverage-istanbul-reporter": "1.2.1",
      "karma-jasmine": "1.1.0",
      "karma-jasmine-html-reporter": "0.2.2",
      "node-sass": "4.5.3",
      "protractor": "5.1.2",
      "ts-node": "3.0.4",
      "tslint": "5.3.2",
      "typescript": "2.4.2"
    }
  </code></pre>