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

Question

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.

score 252 · Accepted Answer · edited May 22 '20 at 01:36

252

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:

Angular HTTP GET with TypeScript error http.get(...).map is not a function in [null]

edited May 22 '20 at 01:36

Shadoweb

5,812
1
42
55

answered May 06 '16 at 13:31

Thierry Templier

198,364
44
396
360

2

Do you know why the properties aren't imported with `import {Observable} from 'rxjs/Observable';`? That seems more intuitive to me. – BrianRT May 06 '16 at 13:39
6

Because Rxjs is designed like this. The `rxjs/Observable` module doesn't import operators because there are a lot of operators. The `rxjs/Rx` module imports all... I think that it's a design choice. – Thierry Templier May 06 '16 at 13:42
4

importing from rxjs/Rx really slow page load down. compare request count with it v without = half the requests when u dont use rxjs/Rx but use for example rxjs/Observable – danday74 Dec 05 '16 at 18:21
The rxjs/Rx import frequently won't even lint anymore, it's a blacklisted import. I know in the past this was seen as kind of ok (and I've done it), but nowadays it should never be part of a correct answer for anything other than playing around. – Tim Consolazio Apr 20 '18 at 13:34

Trent · Answer 2 · 2019-01-03T01:34:22.287

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.

Nope, the RxJS `pipe` function lets you combine multiple functions into a single function. The pipe() function takes as its arguments the functions you want to combine, and returns a new function that, when executed, runs the composed functions in sequence. That mapping does nothing, since it is technically an identity function. — Trent, Jan 03 '19 at 01:33

score 14 · Answer 3 · edited Dec 17 '20 at 18:00

14

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');
  }

edited Dec 17 '20 at 18:00

Saad Abbasi

745
11
25

answered May 03 '20 at 14:23

Prince Babbar

176
1
6

I was trying something like this based on the previous version of Angular but couldn't pull it over correctly. Your answer helped me solve. This was exactly based on my model. Thanks! – priyamtheone Nov 02 '22 at 12:35

score 0 · Answer 4 · edited Feb 07 '23 at 13:59

0

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

import {Observable} from 'rxjs';

or

import {Observable} from 'rxjs/Rx';

edited Feb 07 '23 at 13:59

Илья Хоришко

695
4
15

answered Feb 04 '23 at 17:07

Nishant Kumbhar

1
1

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

4 Answers4

Example of catching error for an Http request Observable

Linked

Related