title: Add multiple HTTP Interceptors to Angular Application
body: <p>How to add multiple, independent HTTP interceptors to an Angular 4 application?</p>
  
  <p>I tried to add them by extending the <code>providers</code> array with more than one interceptors. But only the last one is actually executed, <code>Interceptor1</code> is ignored.</p>
  
  <pre><code>@NgModule({
    declarations: [ /* ... */ ],
    imports: [ /* ... */ HttpModule ],
    providers: [
      {
        provide: Http,
        useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) =&gt;
          new Interceptor1(xhrBackend, requestOptions),
        deps: [XHRBackend, RequestOptions],
      },
      {
        provide: Http,
        useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) =&gt;
          new Interceptor2(xhrBackend, requestOptions),
        deps: [XHRBackend, RequestOptions]
      },
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>I could obviously combine them into a single <code>Interceptor</code> class and that should work. However, I would like to avoid that as these interceptors have completely different purposes (one for error handling, one to show a loading indicator).</p>
  
  <p>So how can I add multiple interceptors?</p>