Angular中Observable无catchError属性报错TS2339求助

你遇到的问题是RxJS版本升级后的API变化导致的——在RxJS 6及以上版本中，操作符的使用方式和旧版本有很大差异，尤其是错误处理相关的操作符。

问题根源 #

你当前的代码把catchError放在了pipe()方法外部链式调用，但在RxJS 6+里，所有操作符（包括catchError）都必须放在pipe()内部，不能像RxJS 5那样直接在Observable实例上链式调用。另外，旧的Observable.throw语法也已经被废弃，需要换成新的throwError函数。

解决方案步骤 #

1. 将catchError移到pipe()内部，和map作为并列的操作符传入
2. 替换Observable.throw为throwError，并从rxjs导入这个函数
3. 确保所有操作符的导入路径正确（你已经导入了catchError和map，这部分可以保留）

修改后的完整代码 #

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable, throwError } from 'rxjs'; // 新增throwError的导入
import { Book } from './book';
import { map, catchError } from "rxjs/operators";

@Injectable()
export class BookService {
  url = "http://localhost:4200/assets/data/books.json";

  constructor(private http:Http) { }

  getBooksWithObservable(): Observable<Book[]> {
    return this.http.get(this.url)
      .pipe(
        map(this.extractData),
        catchError(this.handleErrorObservable) // 将catchError移入pipe内部
      );
  }

  getBooksWithPromise(): Promise<Book[]> {
    return this.http.get(this.url).toPromise()
      .then(this.extractData)
      .catch(this.handleErrorPromise);
  }

  private extractData(res: Response) {
    let body = res.json();
    return body;
  }

  private handleErrorObservable (error: Response | any) {
    console.error(error.message || error);
    return throwError(error.message || error); // 替换Observable.throw为throwError
  }

  private handleErrorPromise (error: Response | any) {
    console.error(error.message || error);
    return Promise.reject(error.message || error);
  }
}

关键说明 #

• RxJS 6+采用了「可表操作符（lettable operators）」设计，所有操作符都需要通过pipe()方法组合使用，不再支持旧的链式调用（比如.map().catch()）
• throwError是RxJS 6引入的新函数，专门用于创建发出错误通知的Observable，替代了旧的Observable.throw
• 如果你之前尝试用catch，那是RxJS 5及更早版本的语法，在RxJS 6里已经被catchError取代，且同样需要放在pipe()内部使用

内容的提问来源于stack exchange，提问作者Jitendra Ahuja