How to create HttpInterceptors across modules?

Question

I'm curious about the usage note at the bottom of the Angular docs on HttpInterceptors, it states:

To use the same instance of HttpInterceptors for the entire app, import the HttpClientModule only in your AppModule, and add the interceptors to the root application injector . If you import HttpClientModule multiple times across different modules (for example, in lazy loading modules), each import creates a new copy of the HttpClientModule, which overwrites the interceptors provided in the root module.

I don't understand how to do this. How can I get the root application injector and add the HttpInterceptor of my lazy loaded modules to it?

It seems like How to import Angular HTTP interceptor only for Child module is also trying to answer this question but the answer there is equally unclear to me.

Why does this not work, and how to properly add the second lazy loaded interceptor?

AppModule

@NgModule({
  imports: [RouterModule.forRoot(routes)], // routes contains a lazy load module
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptorService,
      multi: true,
    }
  ]
})
export class AppModule { }

Lazy loaded child module

@NgModule({
  imports: [
    LazyRoutingModule
  ],
  declarations: [ChildComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CacheInterceptorService,
      multi: true,
    }
  ]
})
export class LazyModule { }

Answer 1

Good morning,

Please excuse my English but I am translating this with google translator.

I am developing an application with several lazy modules and I have just developed an HttpInterceptor and I have had no problems, the process I have done has been as follows:

HttpInterceptor:

import { Injectable } from '@angular/core';
import {
    HttpInterceptor,
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpErrorResponse
} from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
import { NotifierService } from 'angular-notifier';

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {

    constructor(private notifier: NotifierService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(
            retry(1),
            catchError((error: HttpErrorResponse) => {
                this.notifier.notify('error', error && error.message ? error.message : 'Error');
                return throwError(error);
            }
            ));
    }
}

And to simply import into providers of app.module add:

{
       provide: HTTP_INTERCEPTORS,
       useClass: HttpErrorInterceptor,
       multi: true
}

The problem that I think you have is that when you also instantiate in the child you make a new instance which gives problems. I have read several post before doing it which indicated that it should not work but it does haha.

Just in case it is something from some new version of angular, I put the data of the project I am working on:

Angular CLI: 8.3.25 Node: 13.3.0 Angular: 8.2.14