Angular 7 - Global HTTP Interceptor for whole Application

Question

In my app.module.ts, I registered an HTTP Interceptor like this:

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

However, requests made from a lazy-loaded module don't use the Interceptor. It only works when registering the HTTP Interceptor in the lazy-loaded module, too.

But I want to provide it only once in the app.module.ts.

Any ideas on how to do this? Or do I have to provide it in every module?

Answer 1

I think what's happening in your case is something similar that can be observed from this GitHub thread as well. JB Nizet is also probably referring to the same thing in his comment.

You most probably have added the HttpClientModule to the imports array of your LazilyLoadedModule. Hence it's not using the InterceptorService. To make it work, just get rid of it from there. Once that is done, it will use the global HTTP Interceptor Service.

---

Here's a Working Sample StackBlitz for your ref.