CODEWITHSUNDEEP
angularrxjsangular6rxjs6angular-observable
Shubham Verma
Shubham Verma

Reputation: 9933

Angular 6: Property 'catch' does not exist on type 'Observable<Response>'?

I am upgrading my app to Angular 6. I am upgrading from Angular 4, but the code below is causing errors in Angular 6, where it worked fine in Angular 4.

The errors I am getting:

Property 'of' does not exist on type 'typeof Observable'

Error: Property 'catch' does not exist on type 'Observable'

How should I resolve these errors?

  private authInterceptor(observable: Observable<Response>): Observable<Response> {
    return observable.catch((error, source) => {
      if (error.status == 401) {
        this.router.navigateByUrl('/login');
        return Observable.of();
      } else {
        return Observable.throw(error);
      }
    });
  }

Upvotes: 22

Views: 37484

Answers (8)

Shakoor Hussain Attari
Shakoor Hussain Attari

Reputation: 1821

First of all install the rxjs packages using below command

npm i rxjs-compat

then import the libraries using 

import 'rxjs/add/operator/catch';

Or import Observable this way:

import {Observable} from 'rxjs/Rx';

But in this case, you import all operators.

got from below link https://code-examples.net/en/q/235b329

Upvotes: 1

Akj
Akj

Reputation: 7231

import 'rxjs/add/operator/catch';

Or import Observable this way:

import {Observable} from 'rxjs';

Upvotes: 3

Eduardo Yuidy
Eduardo Yuidy

Reputation: 1

This worked for me, I'am using Angular 6.1.0.

import { Observable, Subject, of } from 'rxjs';
import { switchMap, debounceTime, distinctUntilChanged, catchError } from 'rxjs/operators';

this.ofertas = this.subjectPesquisa // Retorno Oferta[]
  .pipe(debounceTime(1000)) // Executa a ação do switchMap após 1 segundo
  .pipe(distinctUntilChanged()) // Apenas executa a ação switchMap se o termo enviado for outro
  .pipe(switchMap((termo: string) => {

    if (termo.trim() === '') {
      // Retornar um observable de array de ofertas vazio.
      return of<Oferta[]>([]);
    }

    console.log('Requisição HTTP para api: ', termo);
    return this.ofertasService.pesquisaOfertas(termo);
  }))
  .pipe(catchError((err: any) => {
    console.log('Erro: ', catchError);
    return of<Oferta[]>([]);
  }));

Upvotes: 0

Susampath
Susampath

Reputation: 716

Import the Library with following method and rearrange the code

import { catchError } from 'rxjs/operators';
return Observable.pipe(catchError =>...);

This worked for me.

Upvotes: 3

Joakim
Joakim

Reputation: 2142

Since you tagged your question rxjs6, I'm assuming the upgrade to Angular 6 includes an upgrade to rxjs6. In that case, it's not working because methods on the observable object are now standalone operators that you can apply using pipe(). Also, imports have changed. See the migration guide for more details.

With rxjs6 it should look something like this:

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

private authInterceptor(observable: Observable<Response>): Observable<Response> {
   return observable.pipe(
       catchError( err => {
            if (err.status == 401) {
                this.router.navigateByUrl('/login');
                return EMPTY;
            } else {
                return throwError(err);
            }
       })
   );
 }

Upvotes: 54

prabhat gundepalli
prabhat gundepalli

Reputation: 967

I am assuming you have migrated to RXJS6 since you have also migrated to angular6.

In RXJS6 use catch Error instead of catch as seen here

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

Upvotes: 2

Mike
Mike

Reputation: 309

you will need to import all operators you are using.

import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41407

Need to import the catch operator 

import 'rxjs/add/operator/catch';

Upvotes: 1

Related Questions