升级至Angular@5.x后Rxjs包导入失效问题求助

这问题我升级Angular 5的时候也踩过坑！其实是因为Angular 5.x对应的RxJS版本是5.5及以上，这个版本对导入方式做了重大调整，废弃了原来的深层路径导入，所以你之前的代码会提示找不到模块。

核心原因 #

RxJS 5.5+为了优化打包体积、统一导入规范，把核心的Observable以及像interval这类创建类操作符都移到了根路径rxjs下，原来从rxjs/Observable、rxjs/observable/interval这类深层路径导入的方式已经被废弃，Angular 5会直接识别不到这些模块。

修复步骤 #

1. 修改导入语句
   把你原来的导入代码：

import { Observable } from 'rxjs/Observable'; 
import { interval } from 'rxjs/observable/interval';

替换成：

import { Observable, interval } from 'rxjs';

2. 修正代码中的重复定义问题
   你的原代码里重复写了两次private startMaquee()方法，这会导致语法错误，需要删掉重复的那一段。

修复后的完整代码 #

import { Observable, interval } from 'rxjs';

private startMaquee() {
  let ndx = 1;
  const marqueeInterval = interval(5000);
  marqueeInterval.subscribe(() => {
    this.marquee = this.marquees[ndx++];
    if(ndx === this.marquees.length) {
      ndx = 0;
    }
  });
}

额外提示（避免后续踩坑） #

如果之后需要使用map、filter这类管道操作符，现在要从rxjs/operators导入，并且通过pipe方法链式调用，比如：

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

// 使用示例
interval(1000).pipe(
  filter(num => num % 2 === 0),
  map(num => num * 2)
).subscribe(result => console.log(result));

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