Agregue múltiples interceptores HTTP a la aplicación angular

Question 1

¿Cómo agregar múltiples interceptores HTTP independientes a una aplicación de Angular 4?

Intenté agregarlos extendiendo la providersmatriz con más de un interceptor. Pero solo el último se ejecuta realmente, Interceptor1se ignora.

@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, podría combinarlos en una sola Interceptorclase y eso debería funcionar. Sin embargo, me gustaría evitar eso, ya que estos interceptores tienen propósitos completamente diferentes (uno para el manejo de errores, otro para mostrar un indicador de carga).

Entonces, ¿cómo puedo agregar múltiples interceptores?

Question 2

Httpno permite tener más de una implementación personalizada. Pero como mencionó @estus, el equipo de Angular ha agregado un nuevo servicio HttpClient recientemente (versión 4.3) que admite el concepto de múltiples interceptores. No es necesario extender el HttpClientcomo lo hace con el antiguo Http. En su lugar, puede proporcionar una implementación HTTP_INTERCEPTORSque puede ser una matriz con la 'multi: true'opción:

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,
    }
  ],
  ...
})

Interceptores:

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 llamada al servidor imprimirá los mensajes de registro de ambos 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();
  }
}