Rxjs error type 'Observable<HttpEvent<any>>'

Andrew Junior Howard

I've recently upgraded my rxjs packages. However my Angular interceptor is now erroring. Here is my code:

import { HttpEvent, HttpHandler, HttpResponse, HttpInterceptor, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Observable, tap, catchError } from 'rxjs';
import { Injectable } from '@angular/core';
import { BusyService } from './shared/services/busy.service';
import { Router } from "@angular/router";

@Injectable()
export class ProgressInterceptor implements HttpInterceptor {

    

    constructor(private router: Router, private busyService: BusyService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        

        return next.handle(req).pipe(
            tap((event: HttpEvent<any>) => {
                

                // Only enable and disable buttons if the skip interceptor was NOT set as a header on that call
                if ((req.headers.get('X-Skip-Interceptor') != "True")) {

                    

                    // If request was sent
                    if ((event.type == 0)) {
                        //console.log("busy");
                        this.busyService.changeBusy(true);
                    }
                    else {
                        //console.log("not busy");
                        this.busyService.changeBusy(false);
                    }

                }

            }),
            catchError((err: HttpErrorResponse) => {

                

                let errorReceived;

                if ((typeof err == 'string'))
                {
                    errorReceived = JSON.parse(err);
                }
                else
                {
                    errorReceived = err;
                }

                this.busyService.changeBusy(false);
                

                return Observable.throw(err);
            }));

        
    }
}

Here is the error:

Error: src/app/progress.interceptor.ts:17:9 - error TS2322: Type 'Observable<unknown>' is not assignable to type 'Observable<HttpEvent<any>>'.
  Type 'unknown' is not assignable to type 'HttpEvent<any>'.
    Property 'type' is missing in type '{}' but required in type 'HttpUserEvent<any>'.

 17         return next.handle(req).pipe(
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 18             tap((event: HttpEvent<any>) => {
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
 65                 return Observable.throw(err);
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 66             }));
    ~~~~~~~~~~~~~~~~

  node_modules/@angular/common/http/http.d.ts:3861:5
    3861     type: HttpEventType.User;
             ~~~~
    'type' is declared here.


Error: src/app/progress.interceptor.ts:65:35 - error TS2339: Property 'throw' does not exist on type 'typeof Observable'.

65                 return Observable.throw(err);

There is zero information out there that I can find to update the intercept code. The error isn't even helpful as it's referencing a node module file that I shouldn't edit.

Michael D

From which RxJS version did you migrate from? In the recent versions, Observable.throw has been replaced with throwError.

You'd need to make the following changes to the RxJS import statement(s)

import { Observable, throwError } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';

And replace Observable.throw() with throwError

catchError((err: HttpErrorResponse) => {
  ...
  return throwError(err);
}

Assert the type using Typescript as

intercept(
  req: HttpRequest<any>, 
  next: HttpHandler
): Observable<HttpEvent<any>> {
  return next.handle(req).pipe(
    ...
  ) as Observable<HttpEvent<any>>;
}

Collected from the Internet

Please contact [email protected] to delete if infringement.