Adicionar vários interceptores HTTP ao aplicativo angular

Como adicionar vários interceptores HTTP independentes a um aplicativo Angular 4?

Tentei adicioná-los estendendo a providersmatriz com mais de um interceptador. Mas apenas o último é realmente executado, Interceptor1é ignorado.

@NgModule({
  declarations: [ /* ... */ ],
  imports: [ /* ... */ HttpModule ],
  providers: [
    {
      provide: Http,
      useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) =>
        new Interceptor1(xhrBackend, requestOptions),
      deps: [XHRBackend, RequestOptions],
    },
    {
      provide: Http,
      useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) =>
        new Interceptor2(xhrBackend, requestOptions),
      deps: [XHRBackend, RequestOptions]
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Obviamente, eu poderia combiná-los em uma única Interceptorclasse e isso deve funcionar. No entanto, eu gostaria de evitar isso, já que esses interceptores têm finalidades completamente diferentes (uma para tratamento de erros, outra para mostrar um indicador de carregamento).

Então, como posso adicionar vários interceptores?

Httpnão permite ter mais de uma implementação customizada. Mas, como @estus mencionou, a equipe do Angular adicionou um novo serviço HttpClient recentemente (versão 4.3) que suporta o conceito de múltiplos interceptores. Você não precisa estender o HttpClientcomo faz com o antigo Http. Você pode fornecer uma implementação para, em HTTP_INTERCEPTORSvez disso, que pode ser uma matriz com a 'multi: true'opção:

import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
...

@NgModule({
  ...
  imports: [
    ... ,
    HttpClientModule
  ],
  providers: [
    ... ,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorOne,
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorTwo,
      multi: true,
    }
  ],
  ...
})

Interceptadores:

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

@Injectable()
export class InterceptorOne implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('InterceptorOne is working');
    return next.handle(req);
  }
}

@Injectable()
export class InterceptorTwo implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('InterceptorTwo is working');
    return next.handle(req);
  }
}

Esta chamada do servidor imprimirá as mensagens de registro de ambos os interceptores:

import {HttpClient} from '@angular/common/http';
...

@Component({ ... })
export class SomeComponent implements OnInit {

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('http://some_url').subscribe();
  }
}