HTTPInterceptor not intercepting http requests from 3rd party widget in Angular

Question

In my app, I use a 3rd party UI widget in my app's UI (which I get from the npm registry as a dependency). That widget when embedded in my app's UI, makes a GET call using axios module.

Now, I notice that the HTTP GET call being made by the widget is not being intercepted by the HTTP interceptor I have. Other HTTP requests from my app are being intercepted, confirming that my Interceptor works in general.

Interceptor:

import { Injectable } from "@angular/core";
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs";
import { LoaderService } from './loader.service';
import { finalize } from "rxjs/operators";

@Injectable()
export class LoaderInterceptor implements HttpInterceptor {

    constructor(private loaderService: LoaderService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (displayLoadingScreen) {

            return next.handle(request).pipe(
                finalize(() => {
                    this.activeRequests--;
                })
            )
        } else {
            return next.handle(request);
        }
    };
}

Answer 1

HttpInterceptor will only work on Angular's HttpClient (and the root instance of it, its possible to have other HttpClients ).

If they are using Axios to make the calls, your interceptor won't have access since its not using your HttpClient .

NOTE: Axios as its own way of adding interceptors. You still may not have access to the Axios instance your 3rd party library is using though...

Here's the interceptor example from the axios docs https://github.com/axios/axios#interceptors

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });