Angular教程中RxJS of操作符导入失败问题求助

看起来你碰到了RxJS版本升级带来的导入方式变化问题，我来帮你理清思路解决这个报错：

问题根源 #

你遇到的报错是因为RxJS 6及以后的版本彻底改变了Observable创建函数和操作符的导入方式，废弃了旧版本中通过原型链扩展的导入模式，也不再推荐从rxjs/Rx这种大模块导入所有内容。

正确的解决方案（RxJS 6+） #

如果你的项目使用的是RxJS 6.x或更高版本，按照以下步骤修改：

1. 修改导入语句
   直接从rxjs导入Observable和创建函数of，从rxjs/operators导入管道操作符（比如你用到的delay）：

   import { Observable, of } from 'rxjs';
   import { delay } from 'rxjs/operators';
   

2. 调整代码调用方式
   你的pipe用法是对的（RxJS 6+要求操作符必须通过pipe链式调用），保持现有逻辑即可：

   getHeroes(): Observable<Hero[]> {
     return of(heroes).pipe(
       delay(this.delayMs) // 模拟延迟
     );
   }
   

如果你的项目还在使用RxJS 5.x（旧版本） #

如果因为依赖限制无法升级RxJS，也可以用旧的导入方式：

import { Observable } from 'rxjs/Observable';
// 导入of静态方法
import 'rxjs/add/observable/of';
// 导入delay实例操作符
import 'rxjs/add/operator/delay';

getHeroes(): Observable<Hero[]> {
  return Observable.of(heroes).delay(this.delayMs);
}

验证RxJS版本 #

可以打开项目根目录的package.json文件，查找rxjs的版本号，确认自己属于哪种情况。

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