Type 'unknown' is not assignable to type 'HttpEvent<any>' - Trying to create HTTP interceptor...

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

I found an interesting tutorial here.

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 first pipe is fine.

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

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

I am seeing the error in VSCode (blue one) and Microsoft VS (purple one), meaning there's definitely something wrong with my code rather than my IDE being weird...

The tutorial was written in June 2020 (4 years ago), so perhaps there have been changes to how Angular Observables work?

Apologies if I am missing some fundamental knowledge, but I would appreciate some guidance, as I am not sure how to proceed...

Thanks!

Continue reading...