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.

angular angular http interceptors

bubbles · Answer

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 => {
        //...
      })
    );

Rachid O · Answer

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 => { ... })
    );

`

Interception for handle http error causes problem

2 Answers

Add your own answers!

Ask a Question