La propriété 'catch' n'existe pas sur le type 'Observable<any>'.

Question

Sur la page de documentation d'Angular 2 pour l'utilisation du service Http, il y a un exemple.

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

J'ai cloné le angular2-webpack-starter et j'ai ajouté le code ci-dessus moi-même.

J'ai importé Observable en utilisant

import {Observable} from 'rxjs/Observable';

Je suppose que les propriétés Observable sont également importés ( .map fonctionne). J'ai regardé le journal des modifications de rxjs.beta-6 et rien n'est mentionné à propos de catch .

Answer 1

Avertissement : Cette solution est obsolète depuis Angular 5.5, veuillez vous référer à la réponse de Trent ci-dessous.

\=====================

Oui, vous devez importer l'opérateur :

import 'rxjs/add/operator/catch';

Ou importer Observable de cette façon :

import {Observable} from 'rxjs/Rx';

Mais dans ce cas, vous importez tous les opérateurs.

Voir cette question pour plus de détails :

• Angular HTTP GET avec erreur TypeScript http.get(...).map n'est pas une fonction dans [null].

Answer 2

Avec RxJS 5.5+, la fonction catch est désormais obsolète. Vous devez maintenant utiliser l'opérateur catchError opérateur en conjonction avec pipe .

RxJS v5.5.2 est la version de dépendance par défaut pour Angular 5.

Pour chaque opérateur RxJS que vous importez, notamment catchError vous devez maintenant importer de 'rxjs/operators' et utiliser l'opérateur pipe.

Exemple de capture d'erreur pour une requête Http 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) => {
        ...
      }
    )
  }
  ...
}

Notez ici que catch est remplacé par catchError y el pipe est utilisé pour composer les opérateurs de manière similaire à ce que vous avez l'habitude de faire avec la chaînage par points.

---

Voir la documentation rxjs sur pipable (précédemment connu sous le nom de louable ) pour plus d'informations.

Answer 3

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