Angular 13: Http Interceptor no está finalizando

Tengo un HtppInterceptor que inicia y detiene una barra de progreso en mi aplicación. Por lo general, esto funciona bien para la mayoría de las solicitudes Http, pero tengo varias llamadas API y, cuando ocurren, HttpHandler nunca finaliza, por lo que la barra de progreso no se detiene. Agregué un par de puntos de registro para ver qué llamadas no se estaban finalizando:

    intercept(
    req: HttpRequest<any>,
    next: HttpHandler
): Observable<HttpEvent<any>> {
    console.log('loading', req.url, this.handleRequestsAutomatically);

// If the Auto mode is turned off, do nothing
    if (!this.handleRequestsAutomatically) {
        return next.handle(req);
    }

    this._setLoadingStatus(true, req.url);

    return next.handle(req).pipe(
        finalize(() => {
            console.log('Finished Loading', req.url);

            this._setLoadingStatus(false, req.url);
        })
    );
}

La llamada Api crea la siguiente solicitud:

:authority: localhost:5001
:method: GET
:path: /api/Appointments/ej?appointmentGroupId=1&year=2022&month=1&day=14
:scheme: https
accept: application/json
accept-encoding: gzip, deflate, br
accept-language: en-AU,en-GB;q=0.9,en-US;q=0.8,en;q=0.7
authorization: Bearer <token>
dnt: 1
origin: http://localhost:4200
referer: http://localhost:4200/
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like 
Gecko) Chrome/97.0.4692.71 Safari/537.36

Originalmente pensé que debía haber algún tipo de conexión abierta por la llamada de API, pero no puedo ver dónde sucedería eso, y no hay "mantener vivo" en la solicitud de encabezado. La llamada a la API devuelve los datos correctamente, no puedo ver que la conexión se mantenga abierta en ninguno de los extremos.

¿Por qué la llamada HttpClient no completa y detiene mi barra de progreso?

Answer

Esto fue una falla de diseño.

El problema era que dentro de la biblioteca API había otro interceptor que estaba configurando el token de usuario en el encabezado. Dentro de ese interceptor, el HttpRequestobjeto estaba siendo clonado.

Como el primer interceptor estaba esperando que terminara la solicitud original y el segundo interceptor estaba llamando a la solicitud en el clon, la primera solicitud nunca se completó.

Agregar el servicio de indicador de carga al segundo interceptor y llamar _setLoadingStatus(false, req.url)desde allí resuelve el problema.

Editar: como señala chrisY, a continuación, una mejor resolución es cambiar el orden de las declaraciones de importación para que quede al LoadingHttpInterceptorfinal. De esta manera, se está ejecutando fuera del HttpClient en vivo y el error no ocurre.