Angular 5升级至6报错：类型Observable不存在属性'map'

这个问题我太熟了！Angular 6升级后对应的RxJS版本跳到了6.x，这个版本对操作符的用法做了重大调整，你遇到的Property 'map' does not exist on type 'Observable'就是因为这个变化导致的。下面给你一步步的解决方案：

核心原因 #

在RxJS 6及以后的版本中：

• 不再支持直接在Observable实例上链式调用map、catch这类操作符
• 原有的catch操作符被重命名为catchError
• 所有操作符需要通过pipe()方法来组合调用
• 创建Observable的静态方法（比如Observable.of）也改为直接导出的函数（比如of）

具体修复步骤 #

1. 更新导入语句 #

把原来的操作符导入方式，换成从rxjs/operators导入单个操作符，同时调整Observable相关的导入：

// 替换旧的导入（比如 import 'rxjs/add/operator/map'; 这类）
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

2. 修改代码为pipe调用方式 #

把原来的链式调用改成用pipe()包裹操作符的形式，同时替换catch为catchError，Observable.of为of：

// 旧代码
// const request = this.evidenceService.get().map((res) => res.data) .catch(error => Observable.of(null));

// 新代码
const request = this.evidenceService.get().pipe(
  map((res) => res.data),
  catchError(error => of(null))
);

额外提示 #

如果你的项目里有大量旧的RxJS代码暂时不想全部迁移，可以安装rxjs-compat包来兼容旧写法：

npm install rxjs-compat --save

不过这只是临时方案，长期来看还是建议逐步迁移到RxJS 6的新写法，避免后续版本升级时出现更多问题。

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