Angular 5 Http Interceptors error when injecting service

Question

I am receiving the following strange dependency injection behavior when using custom HttpInterceptors in angular 5+.

The following simplified code works fine:

Answer 1

For this issue, make sure that the service which you are injecting in Http interceptor needs to be added in providers along with the HTTP_INTERCEPTORS in the module.

providers: [ AuthService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpConfigInterceptor,
      multi: true
    }
]

Answer 2

You need to add the auth service as a dependency of the interceptor.

providers: [ 
{
  provide: HTTP_INTERCEPTORS,
  useClass: HttpConfigInterceptor,
  multi: true,
  deps: [AuthService]
}