Ionic2中Observable<Object>无map属性问题求助

我最近在Ionic2项目里碰到个头疼的问题——试了好几种RxJS导入方式，始终跳出Property 'map' does not exist on type 'Observable<Object>'的报错。折腾了一圈都没解决，先把我的代码和试过的方案列出来，再给大家说说最终搞定的思路。

我的原代码 #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class LevelTestDataProvider {
  constructor(public http: HttpClient) {
    console.log('Hello LevelTestDataProvider Provider');
  }
  getRemoteData() {
    this.http.get('PUT JSON URL HERE').map((res: Response) => res.json()).subscribe(data => {
      console.log(data);
    })
  }
}

我试过的导入方式 #

• import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map';
• import { Observable } from 'rxjs'; import 'rxjs/add/operator/map';（引发错误）
• import { Observable } from 'rxjs/Observable'; import 'rxjs/Rx';
• import { map } from "rxjs/operators"; import 'rxjs/Rx';（引发错误）

另外我已经把TypeScript更新到最新的2.6.2，package.json也同步了版本，当前RxJS版本是5.5.2。

正确的解决方法 #

问题其实出在两个核心点：RxJS 5.5+的操作符使用方式更新了，还有HttpClient的默认行为和旧版Http不一样。

1. 改用Pipeable操作符 #

RxJS 5.5之后官方推荐使用pipeable操作符——也就是从rxjs/operators导入对应操作符，然后通过pipe()方法链式调用，而不是之前那种补丁式的rxjs/add/operator/xxx导入方式，后者容易和新的Observable类型产生兼容问题。

2. 无需手动调用res.json() #

Angular的HttpClient.get()方法默认会自动把响应解析成JSON对象，不用像旧版Http模块那样手动调用res.json()转换格式了，这也是之前代码冗余且报错的原因之一。

修改后的代码 #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class LevelTestDataProvider {
  constructor(public http: HttpClient) {
    console.log('Hello LevelTestDataProvider Provider');
  }

  getRemoteData(): void {
    this.http.get('PUT JSON URL HERE')
      .pipe(
        // 要是需要对返回数据做处理，在这里写map逻辑即可
        map((res: any) => {
          // 比如筛选字段、转换数据结构
          return res;
        })
      )
      .subscribe(data => {
        console.log(data);
      });
  }
}

额外注意事项 #

• 确保执行npm install同步依赖，保证RxJS版本确实是5.5.2；
• 不要混用补丁式和Pipeable式的导入方式，避免类型冲突；
• RxJS 5.5+标准做法是从rxjs导入Observable，之前报错可能是依赖未正确安装或新旧导入方式混用导致的。

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