Angular 6中RXJS导入语法问题：Angular5迁移后Observable导入失效

嘿，刚完成类似的Angular版本迁移，太懂你遇到的这个导入问题了！Angular 6配套的RxJS 6做了重大的导入方式变更，把原来的补丁式导入改成了更高效的pipeable操作符和根目录导入，下面给你整理好对应的替换方案：

1. 核心Observable类的导入 #

原来Angular 5的写法：

import { Observable } from 'rxjs/Observable';

现在直接从rxjs根目录导入：

import { Observable } from 'rxjs';

2. 操作符的导入（map、catch等） #

RxJS 6废弃了原来的rxjs/add/operator/xxx补丁式导入，改用pipeable操作符，需要从rxjs/operators导入，并且通过.pipe()方法链式调用（不再直接链式调用操作符）。

另外注意：原来的catch操作符改名为catchError了！

原来的写法：

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

// 使用方式
someObservable$.map(res => res.data).catch(err => handleError(err));

现在的正确写法：

import { map, catchError } from 'rxjs/operators';

// 使用方式：用pipe包裹所有操作符
someObservable$.pipe(
  map(res => res.data),
  catchError(err => handleError(err))
);

3. Observable.throw的替换 #

原来的Observable.throw现在被独立的throwError函数替代，导入和用法都变了：

原来的写法：

import 'rxjs/add/observable/throw';

// 使用方式
return Observable.throw(err.message);

现在的正确写法：

import { throwError } from 'rxjs';

// 使用方式
return throwError(err.message);

完整示例对比 #

Angular 5 旧代码 #

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

fetchData(): Observable<any> {
  return this.http.get('/api/data')
    .map(res => res.json())
    .catch(err => {
      console.error(err);
      return Observable.throw('加载数据失败，请重试');
    });
}

Angular 6 新代码 #

import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

fetchData(): Observable<any> {
  return this.http.get('/api/data')
    .pipe(
      map(res => res.json()),
      catchError(err => {
        console.error(err);
        return throwError('加载数据失败，请重试');
      })
    );
}

过渡方案（可选） #

如果你的项目很大，暂时不想一次性修改所有导入和操作符调用，可以安装rxjs-compat兼容包，这样旧的导入语法还能正常工作：

npm install rxjs-compat --save

不过这只是临时过渡，官方推荐尽快迁移到新的pipeable操作符，因为它能显著减小打包体积，并且是RxJS的长期发展方向。

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