title: How to create HttpInterceptors across modules?
body: <p>I'm curious about the <a href="https://angular.io/api/common/http/HttpInterceptor#usage-notes" rel="noreferrer">usage note</a> at the bottom of the Angular docs on HttpInterceptors, it states:</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>I don't understand how to do this. How can I get <em>the root application injector</em> and add the HttpInterceptor of my lazy loaded modules to it?</p>
  
  <p>It seems like <em><a href="https://stackoverflow.com/questions/53305685/how-to-import-angular-http-interceptor-only-for-child-module">How to import Angular HTTP interceptor only for Child module</a></em> is also trying to answer this question but the answer there is equally unclear to me.</p>
  
  <p>Why does this not work, and how to properly add the second lazy loaded interceptor?</p>
  
  <h1>AppModule</h1>
  
  <pre><code>@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 { }
  </code></pre>
  
  <h1>Lazy loaded child module</h1>
  
  <pre><code>@NgModule({
    imports: [
      LazyRoutingModule
    ],
    declarations: [ChildComponent],
    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: CacheInterceptorService,
        multi: true,
      }
    ]
  })
  export class LazyModule { }
  </code></pre>