Based on the answer provided by Andrew.
To incorporate interceptors into the httpClient pipeline, you will need to include two modified classes from the angular repository http/src/interceptor.ts and http/src/module.ts:
class HttpInterceptorHandler implements HttpHandler {
constructor(private next: HttpHandler, private interceptor: HttpInterceptor) {}
handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
return this.interceptor.intercept(req, this.next);
}
}
class HttpInterceptingHandler implements HttpHandler {
private chain: HttpHandler|null = null;
private httpBackend:HttpHandler;
constructor(private injector: Injector) {
this.httpBackend = new HttpXhrBackend({ build: () => new XMLHttpRequest });
}
handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
if (this.chain === null) {
const interceptors = this.injector.get(HTTP_INTERCEPTORS, []);
this.chain = interceptors.reduceRight((next, interceptor) => new HttpInterceptorHandler(next, interceptor), this.httpBackend);
}
return this.chain.handle(req);
}
}
Remember that interceptors do not require the @Injectable decorator:
class HttpIntersept implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log(req.urlWithParams);
return next.handle(req)
}
}
As Andrew mentioned:
const injector = Injector.create({
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: HttpIntersept, multi: true, deps: []},
{ provide: HTTP_INTERCEPTORS, useClass: HttpIntersept2, multi: true, deps: []},
{ provide: HttpHandler, useClass: HttpInterceptingHandler, deps [Injector,HTTP_INTERCEPTORS] },
{ provide: HttpClient, deps: [HttpHandler] }
],
});