I have been trying to create a loading spinner in my Angular application.

I found an interesting tutorial here (https://medium.com/swlh/angular-loading-spinner-using-http-interceptor-63c1bb76517b).

It was all going pretty well, until the final step, when I need to actually create the intercept function.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor, HttpResponse
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, map } from 'rxjs/operators'
import { LoadingService } from './loading.service';

/**
 * This class is for intercepting http requests. When a request starts, we set the loadingSub property
 * in the LoadingService to true. Once the request completes and we have a response, set the loadingSub
 * property to false. If an error occurs while servicing the request, set the loadingSub property to false.
 * @class {HttpRequestInterceptor}
 */
@Injectable()
export class HttpRequestInterceptor implements HttpInterceptor {

    /**
     * 
     * @param _loading 
     */
    constructor(
        private _loading: LoadingService
    ) { }

    /**
    * Called at the start of every HTTP request. This function will try to activate the loading spinner
    * @param request 
    * @param next 
    * @returns 
    */
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this._loading.setLoading(true, request.url);
        return next.handle(request)
            .pipe(catchError((err) => {
                this._loading.setLoading(false, request.url);
                return err;
            }))
            .pipe(map<HttpEvent<any>, any>((evt: HttpEvent<any>) => {
                if (evt instanceof HttpResponse) {
                    this._loading.setLoading(false, request.url);
                }
                return evt;
            }));
      }
}

The 1st pipe is fine.

However, there is a big red underline all over the 2nd pipe. The error states the following:

Argument of type ‘OperatorFunction<HttpEvent, any>’ is not assignable to parameter of type ‘OperatorFunction<unknown, any>’.
Type ‘unknown’ is not assignable to type ‘HttpEvent’.ts(2345)

I have been learning Angular for about 1 week, and also not very familiar with typescript, so apologies if I am missing some fundamental knowledge, but would appreciate some guidance, as I am not sure how to proceed…

If the stackoverflow gurus have any advice it would be greatly appreciated.

Thanks!