Property 'catch' does not exist on type 'Observable<any>'
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]
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.
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');
}