Angular5升级至Angular6遇TS2339错误：Observable无'do'属性

嘿，这个问题我太熟悉了！你遇到的是RxJS 6.x带来的兼容性变化——Angular 6正式配套RxJS 6，这个版本里做了不少操作符的调整，其中就包括把你代码里用的do操作符重命名为tap，而且所有操作符都必须通过pipe()方法来组合使用，不能再像RxJS 5那样直接链式调用了。

具体修改步骤： #

1. 导入tap操作符
   首先在你的拦截器文件顶部，从rxjs/operators导入tap：

   import { tap } from 'rxjs/operators';
   

2. 替换do为tap并改用pipe()包裹
   RxJS 6不再支持直接在Observable上调用.do()，必须把操作符放在pipe()方法里。另外还要注意一个细节：你代码里的req.headers.delete('skip-interceptors')是无效的，因为HttpHeaders是不可变对象，修改后需要重新克隆请求。

修改后的完整代码： #

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  console.log(req);
  if (!req.headers.has('skip-interceptors')) {
    const card = localStorage.getItem(LocalStoregeIdems.oAUTH_ACCESS_CARD);
    let headers;
    if (card) {
      headers = req.headers.set('Authorization', card);
    }
    const clone = req.clone({ 
      withCredentials: true, 
      headers 
    });
    // 改用pipe + tap替代原来的do
    return next.handle(clone).pipe(
      tap(event => {
        console.log(event);
      })
    );
  } else {
    // 注意：HttpHeaders不可变，需要克隆请求后删除header
    const modifiedReq = req.clone({
      headers: req.headers.delete('skip-interceptors')
    });
    // 同样改用pipe + tap
    return next.handle(modifiedReq).pipe(
      tap(event => {
        console.log(event);
      })
    );
  }
}

额外说明： #

RxJS 6的这些改动是为了优化树摇（Tree Shaking），减少打包体积。除了do改tap，还有其他操作符也有重命名（比如catch改catchError，switch改switchAll），如果后续遇到类似的TS2339错误，都可以先排查是不是操作符名称或调用方式变了。

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