ไม่มีคุณสมบัติ 'catch' ในประเภท 'Observable <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และไม่มีอะไรจะกล่าวถึงเกี่ยวกับ

คำเตือน : โซลูชันนี้เลิกใช้แล้วตั้งแต่ Angular 5.5 โปรดดูคำตอบของ Trent ด้านล่าง

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

ใช่คุณต้องนำเข้าโอเปอเรเตอร์:

import 'rxjs/add/operator/catch';

หรือนำเข้าObservableด้วยวิธีนี้:

import {Observable} from 'rxjs/Rx';

แต่ในกรณีนี้คุณนำเข้าตัวดำเนินการทั้งหมด

ดูคำถามนี้สำหรับรายละเอียดเพิ่มเติม:

• Angular HTTP GET พร้อมข้อผิดพลาด TypeScript http.get (... ). map ไม่ใช่ฟังก์ชันใน [null]

ด้วย RxJS 5.5+ catchตอนนี้โอเปอเรเตอร์เลิกใช้งานแล้ว ตอนนี้คุณควรใช้ประกอบการร่วมกับcatchErrorpipe

RxJS v5.5.2 เป็นเวอร์ชันอ้างอิงเริ่มต้นสำหรับ Angular 5

สำหรับตัวดำเนินการ RxJS แต่ละตัวที่คุณนำเข้ารวมถึงcatchErrorตอนนี้คุณควรนำเข้าจาก 'rxjs / operator' และใช้ตัวดำเนินการไปป์

ตัวอย่างการตรวจจับข้อผิดพลาดสำหรับคำขอ 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 เกี่ยวกับตัวดำเนินการ pipable (ก่อนหน้านี้เรียกว่าlettable ) สำหรับข้อมูลเพิ่มเติม

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