TransWikia.com

Interception for handle http error causes problem

Stack Overflow Asked by mnu-nasir on February 2, 2021

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.

2 Answers

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

Answered by bubbles on February 2, 2021

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

`

Answered by Rachid O on February 2, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP