Angular 4 - Callback for Observable.do() does not get called in interceptor

Question

Trying to implement solution for displaying a loading indicator when requests are in progress. Looking from this solution I implemented the interceptor with the service. All works fine, except the counter is not deceasing becase the .do() callback never gets executed (b is never printed in the console). Any thoughts on that? How to know if request has finished?

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

import { LoadingIndicatorService } from './loading-indicator.service';

@Injectable()
export class LoadingIndicatorInterceptor implements HttpInterceptor {
    constructor(private loadingIndicatorService: LoadingIndicatorService) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      this.loadingIndicatorService.requestsCount++;

      const handleObs: Observable<HttpEvent<any>> = next.handle(req);

      console.log('a');
      handleObs.do(() => {
        console.log('b');
        this.loadingIndicatorService.requestsCount--;
      });

      return handleObs;
    }
}

Answer 1

The do() is never fired because you have to return your new observable. you could do it like so:

export class LoadingIndicatorInterceptor implements HttpInterceptor {
constructor(private loadingIndicatorService: LoadingIndicatorService) {}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  this.loadingIndicatorService.requestsCount++;

  const handleObs: Observable<HttpEvent<any>> = next.handle(req);

  console.log('a');
  return handleObs.do(() => {
    console.log('b');
    this.loadingIndicatorService.requestsCount--;
  });
}
}