Interception for handle http error causes problem

Question

I am developing a project in Angular 10. I have created a Http Interceptor for handle http error. I have used "map" and "of" operator. But it showing the below error:

Property 'map' does not exist on type 'Observable<HttpEvent>'.
14 .map(resp => {

Property 'of' does not exist on type 'typeof Observable'. 31 Observable.of(err);

Here is my Interceptor code:

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

@Injectable({
  providedIn: 'root'
})
export class HttpErrorHandlerServiceService implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req)
      .map(resp => {
        if (resp instanceof HttpResponse) {
          return resp;
        }
      })
      .catch(err => {
        console.log(err);
        
        if (err instanceof HttpErrorResponse) {
          console.log(err.status);
          console.log(err.statusText);
          
          if (err.status === 401) {
            // redirect the user to login page
            // 401 unauthorised user
          }          
        }
        return Observable.of(err);
      });
  }
}

Can anyone suggest what is the wrong in my code.

Answer 1

there's no more map or catch operators in the Observable object

use pipe instead :

import { catchError, map } from 'rxjs/operators';

//...
return next.handle(req)
    .pipe(
      map(resp => {
        //....
      }),
      catchError(err => {
        //...
      })
    );

Answer 2

I didn't read your entire code but judging from you error you can fix it by using of operator:

instead of return Observable.of(err); do return of(err); and add an import `import { Observable, of } from 'rxjs';

Edit

as MikeOne commented you need also to use the map operator:

import { catchError, map } from 'rxjs/operators';
...
return next.handle(req)
    .pipe(
      map(resp => { ... }),
      catchError(err => { ... })
    );

`