title: Angular 7 gives this.interceptor is undefined error
body: <p>I'm trying to implement a HTTP Interceptor in angular7, but it gives "this.interceptor is undefined" error. What is the reason for it?</p>
  
  <p>auth.service.ts - where i make http call</p>
  
  <pre><code>@Injectable()
  export class AuthService{
  
      constructor(private httpClient: HttpClient){}
  
      login(userName, password){
          return this.httpClient.post('/authenticate', {"username" : userName, "password" : password});
      }
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      LoginComponent,
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      FormsModule,
      HttpClientModule,
    ],
    providers: [AuthService, fakeBackendProvider],
    bootstrap: [AppComponent]
  })
  
  export class AppModule { }
  </code></pre>
  
  <p>interceptor</p>
  
  <pre><code>import { HTTP_INTERCEPTORS, HttpInterceptor,  HttpHandler, HttpEvent} from '@angular/common/http';
  
  class FakeBackendInterceptor implements HttpInterceptor {
  
     intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
        const { url, method, headers, body } = request;
        return next.handle(request);
     }
  
  }
  
  export const fakeBackendProvider = {
     provide: HTTP_INTERCEPTORS,
     useFactory: FakeBackendInterceptor,
     multi: true
  }
  </code></pre>
  
  <p>This is the error i get,</p>
  
  <p><a href="https://i.stack.imgur.com/FqOfv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FqOfv.png" alt="console error"></a></p>