从Angular 5升级至Angular 6后出现大量rxjs错误求助

我之前帮不少开发者处理过这类升级后的RxJS报错问题，其实Angular 6对RxJS的版本和用法做了重大调整，这大概率是你遇到问题的核心原因——哪怕跟着官方升级指南走，也容易忽略这些细节：

• RxJS 6的导入路径变更
  旧版本（RxJS 5）的导入方式已经不再被支持，比如原来习惯写：

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

  RxJS 6要求统一从rxjs和rxjs/operators导入：

  import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  

• 操作符调用方式必须改用pipe()
  原来的链式调用操作符写法在RxJS 6里会报错，必须用pipe()方法包裹所有操作符：
  旧写法：

  this.apiService.getData()
    .map(res => res.data)
    .catch(err => handleError(err));
  

  新写法：

  this.apiService.getData()
    .pipe(
      map(res => res.data),
      catchError(err => handleError(err))
    );
  

• 临时兼容方案：安装rxjs-compat
  如果你不想一次性修改所有代码，可以先安装兼容包来适配旧写法，给自己留足够的时间逐步迁移：

  npm install rxjs-compat --save
  

  不过这只是过渡方案，建议还是尽快把代码迁移到RxJS 6的规范上，避免后续版本升级再出问题。

• 检查第三方依赖的兼容性
  有些第三方库可能还没适配RxJS 6，你可以查看这些库的版本更新日志，或者暂时降级到兼容RxJS 6的版本，等库更新后再跟进升级。

你可以先从导入路径和pipe()方法的修改入手，大部分这类报错都是这两个原因导致的。

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