升级RxJS至6后出现Property 'map'不存在于Observable类型的错误求助

我刚帮好几个开发者处理过这个RxJS 6升级的典型问题，你遇到的报错本质是RxJS 6对操作符调用方式和导入路径做了根本性调整，而你还在沿用RxJS 5的链式调用写法导致的。

核心问题解析 #

RxJS 6彻底移除了挂载在Observable原型上的操作符（比如.map()、.catch()这类链式调用的方法），改为要求通过pipe()方法来组合操作符，同时导入路径也做了统一优化：

• Observable、of这类创建型API直接从rxjs根目录导入
• map、catchError这类操作符从rxjs/operators导入（注意：原catch操作符改名为catchError了）

正确的显式导入+pipe写法 #

你已经找到了部分正确方向，但需要调整导入路径并严格使用pipe()组合操作符：

旧RxJS 5写法（链式调用+原型导入）

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

this.http.get('/api/appsettings/get')
  .map(data => { return true; })
  .catch(() => { return Observable.of(false); });

新RxJS 6写法（显式导入+pipe组合）

// 从rxjs根目录导入Observable和创建方法of
import { of, Observable } from 'rxjs';
// 从rxjs/operators导入需要的操作符
import { catchError, map } from 'rxjs/operators';

this.http.get('/api/appsettings/get')
  .pipe(
    map(data => { return true; }),
    catchError(() => { return of(false); })
  );

为什么全量导入import 'rxjs/Rx'能运行？ #

全量导入会把所有RxJS的操作符重新挂载回Observable原型，相当于强制兼容RxJS 5的写法，但这会导致打包体积大幅增加（引入了很多你不需要的操作符），完全违背了RxJS 6优化树摇（tree-shaking）的初衷，所以非常不推荐。

额外小提示 #

如果你的项目里有大量旧代码，可以用官方提供的rxjs-tslint规则自动迁移，运行对应的lint修复命令就能批量把链式调用改成pipe写法，同时修正导入路径，能省不少手动修改的功夫。

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