Eigenschap ‘catch’ bestaat niet op type ‘Observable<any>’

Op de Angular 2-documentatiepagina voor het gebruik van de Http-service staat een voorbeeld.

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

Ik heb het project angular2-webpack-startergekloond en de bovenstaande code zelf toegevoegd.

Ik heb Observablegeïmporteerd met

import {Observable} from 'rxjs/Observable';

Ik neem aan dat de eigenschappen Observableook worden geïmporteerd (.mapwerkt). Gekeken naar de changelog voor rxjs.beta-6 en er wordt niets vermeld over catch.

Antwoord 1, autoriteit 100%

Waarschuwing: deze oplossing is verouderd sinds Angular 5.5, raadpleeg het antwoord van Trent hieronder

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

Ja, u moet de operator importeren:

import 'rxjs/add/operator/catch';

Of importeer Observableop deze manier:

import {Observable} from 'rxjs/Rx';

Maar in dit geval importeert u alle operators.

Zie deze vraag voor meer details:

• Angular HTTP GET met TypeScript-fout http.get(…).map is geen functie in [null]

Antwoord 2, autoriteit 44%

Met RxJS 5.5+ is de operator catchnu verouderd. Gebruik nu de operator catchErrorin combinatie met pipe.

RxJS v5.5.2 is de standaard afhankelijkheidsversie voor Angular 5.

Voor elke RxJS-operator die u importeert, inclusief catchError, moet u nu importeren vanuit ‘rxjs/operators’ en de pipe-operator gebruiken.

Voorbeeld van een vangfout voor een Http-verzoek Waarneembaar

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

Merk hier op dat catchwordt vervangen door catchErroren dat de operator pipewordt gebruikt om de operatoren op dezelfde manier samen te stellen als wat u gewend bent aan puntketens.

Zie de rxjs-documentatie op pipable(voorheen bekend als verhuurbare) operators voor meer info.

Antwoord 3, autoriteit 4%

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