Властивість 'catch' не існує для типу 'Спостерігається <any>'

На сторінці документації Angular 2 для використання служби Http є приклад.

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

Я клонував проект angular2-webpack-starter і сам додав вищезазначений код.

Я імпортував Observableза допомогою

import {Observable} from 'rxjs/Observable';

Я припускаю, що властивості Observableтакож імпортовані ( .mapпрацює). Подивився журнал змін для rxjs.beta-6, і нічого про це не згадується catch.

Попередження : Це рішення застаріле з кутового 5,5, див. Відповідь Трента нижче

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

Так, вам потрібно імпортувати оператора:

import 'rxjs/add/operator/catch';

Або імпортуйте Observableтаким чином:

import {Observable} from 'rxjs/Rx';

Але в цьому випадку ви імпортуєте всіх операторів.

Дивіться це питання для більш детальної інформації:

• Кутовий HTTP GET з помилкою TypeScript http.get (...). Map не є функцією в [null]

З RxJS 5.5+, catchоператор тепер застарілий. Тепер вам слід використовувати catchErrorоператора спільно з pipe.

RxJS v5.5.2 є версією залежності за замовчуванням для Angular 5.

Для кожного оператора RxJS, який ви імпортуєте, включаючи catchErrorтепер , ви повинні імпортувати з 'rxjs / операторів' та використовувати оператор труби.

Приклад помилки вловлювання для Http-запиту

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

Зверніть увагу, що catchзамінено, catchErrorі pipeоператор використовується для складання операторів аналогічно тому, як ви звикли з ланцюжком точок.

Додаткову інформацію див. У документації на rxjs щодо операторів, що можна скопіювати (раніше відомих як допустимі ).

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