CODEWITHSUNDEEP
javascriptangulartypescriptrxjs
BrianRT
BrianRT

Reputation: 1972

Property 'catch' does not exist on type 'Observable<any>'

On the Angular 2 documentation page for using the Http service, there is an example.

getHeroes (): Observable<Stuff[]> {
  return this.http.get(this.url)
                  .map(this.extractData)
                  .catch(this.handleError);
}

I cloned the angular2-webpack-starter project and added the above code myself.

I imported Observable using 

import {Observable} from 'rxjs/Observable';

I'm assuming the properties Observable are imported as well (.map works). Looked at the changelog for rxjs.beta-6 and nothing is mentioned about catch.

Upvotes: 148

Views: 126348

Answers (4)

Nishant Kumbhar
Nishant Kumbhar

Reputation: 1

Check the Angular version you are using and respective to that :

import {Observable} from 'rxjs';

or

import {Observable} from 'rxjs/Rx';

Upvotes: 0

Prince Babbar
Prince Babbar

Reputation: 176

In angular 8:

//for catch:
import { catchError } from 'rxjs/operators';

//for throw:
import { Observable, throwError } from 'rxjs';

//and code should be written like this.

getEmployees(): Observable<IEmployee[]> {
    return this.http.get<IEmployee[]>(this.url).pipe(catchError(this.erroHandler));
  }

  erroHandler(error: HttpErrorResponse) {
    return throwError(error.message || 'server Error');
  }

Upvotes: 14

Thierry Templier
Thierry Templier

Reputation: 202316

Warning: This solution is deprecated since Angular 5.5, please refer to Trent's answer below

=====================

Yes, you need to import the operator:

import 'rxjs/add/operator/catch';

Or import Observable this way:

import {Observable} from 'rxjs/Rx';

But in this case, you import all operators.

See this question for more details:

Upvotes: 253

Trent
Trent

Reputation: 4316

With RxJS 5.5+, the catch operator is now deprecated. You should now use the catchError operator in conjunction with pipe.

RxJS v5.5.2 is the default dependency version for Angular 5.

For each RxJS Operator you import, including catchError you should now import from 'rxjs/operators' and use the pipe operator.

Example of catching error for an Http request Observable

import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
...

export class ExampleClass {
  constructor(private http: HttpClient) {
    this.http.request(method, url, options).pipe(
      catchError((err: HttpErrorResponse) => {
        ...
      }
    )
  }
  ...
}

Notice here that catch is replaced with catchError and the pipe operator is used to compose the operators in similar manner to what you're used to with dot-chaining.

See the rxjs documentation on pipable (previously known as lettable) operators for more info.

Upvotes: 124

Related Questions