Angular2项目报错TS2339：Observable<Response>无map属性，已导操作符仍无效

我之前也踩过这个坑！别慌，咱们一步步来排查解决：

• 先核对RxJS版本是否匹配：Angular 2对应的RxJS一般是5.x版本，要是你不小心装了6及以上版本，原来的rxjs/add/operator/xxx这种导入方式就失效了。先去package.json里看rxjs的版本：

  • 如果是5.x：确认导入语句没问题的话继续往下查；
  • 如果是6+：得换成pipeable操作符的写法，示例如下：

    import { map, catchError } from 'rxjs/operators';
    // 调用时用pipe包裹操作符
    this.http.get('目标地址').pipe(
      map((res: Response) => res.json()),
      catchError(err => { /* 错误处理逻辑 */ })
    );
    

• 检查导入语句的细节：确保import 'rxjs/add/operator/map';和import 'rxjs/add/operator/catch';放在服务文件的顶部，而且拼写完全正确（比如别把map写成Map，catch写成Catch）。另外提一句，Angular 2的Http模块其实已经被弃用了，新项目更推荐用HttpClient，它默认返回JSON格式数据，不用手动map，还能避免这类类型匹配问题：

  // 替换Http为HttpClient
  import { HttpClient } from '@angular/common/http';
  // 使用示例
  this.http.get<Currency[]>('你的接口地址').pipe(
    catchError(err => { /* 错误处理 */ })
  );
  

• 检查TypeScript配置：打开tsconfig.json，看看compilerOptions里的lib数组有没有包含es2015或者es6，因为Observable的操作符依赖ES6的特性，配置示例：

  "compilerOptions": {
    "lib": ["es2015", "dom"]
  }
  

• 最后试试重启服务和编辑器：有时候缓存会捣乱，改动了导入语句但编辑器或者开发服务器没识别到，重启下ng serve和你的IDE（比如VS Code），说不定问题就消失了。

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