Angular 5 Http Interceptors error when injecting service

Update on end of January 2018

Angular Team resolved this issue in Angular 5.2.3 released 31 January 2018. After updating angular version you will be able to inject services that use HTTPClient as normal in constructor

Bug Fixes

common: allow HttpInterceptors to inject HttpClient (#19809) (ed2b717), closes #18224

from Angular changelog

So it turns out that if the service you inject into the Http Interceptor has a dependency on HttpClient, this leads to a cyclic dependency.

Since my AuthService was a mix of all different logics (login/out, routing the user, saving/loading tokens, making api calls), I separated the part needed for the interceptors into its own service (just the user credentials & tokens) and now injecting it successfully into the Interceptor.

export class AuthInterceptor implements HttpInterceptor {
    constructor(private credentials: CredentialsService) {}
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const token = this.credentials.getToken();
        const api_key = this.credentials.getApiKey();
    }
}

export class CredentialsService {
    token: string;
    user: IUser;
    constructor(private http: HttpClient) {
        this.loadCredentialsFromStorage();
    }
}

This seems to work fine. Hope this helps someone.