Angular 2 beta.17: “map”属性在“Observable<Response>”类型上不存在。

Question

我刚从Angular 2 beta16升级到beta17，这需要使用rxjs 5.0.0-beta.6（变更日志在此：https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28）。 在beta16中，Observable/map功能的所有工作都很好。 升级后出现了以下错误，并且在typescript尝试转译时发生：

1. 'map'属性在类型“Observable”上不存在（任何我使用observable的地方都用了map）
2. c:/path/node_modules/rxjs/add/operator/map.d.ts(2,16): error TS2435: 环境模块不能嵌套在其他模块或命名空间中。
3. c:/path/node_modules/rxjs/add/operator/map.d.ts(2,16): error TS2436: 环境模块声明不能指定相对模块名称。

我看过了这个问题/答案，但它并没有解决问题：Observable errors with Angular2 beta.12 and RxJs 5 beta.3 我的appBoot.ts看起来像这样（已经引用了rxjs/map）：

///<reference path="./../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
[stuff]
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {enableProdMode} from 'angular2/core';
import { Title } from 'angular2/platform/browser';


//enableProdMode();
bootstrap(AppDesktopComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    Title
]);

有人知道出了什么问题吗？

- brando

---

可能是重复的问题：Property 'map' does not exist on type 'Observable<Response>' - polyp

Answer 1

你需要导入map操作符：

import 'rxjs/add/operator/map'

- 0x1ad2

---

Angular团队和RxJS团队都不推荐这种导入整个RX的方法。你不应该这样做。它太大了。上面的第一个答案是好的，但第二个答案就不行了。@0x1ad2，你能否更新你的答案，不再包含作为第二个选项的大量导入？ - frosty

这是不直观的。在 Angular 2+ 开发中，这被记录为实现 Observable 的依赖关系在哪里？ - Joe

这适用于 Ionic 3.20.0 吗？我遇到了相同的问题，因为Ionic没有自动导入地图。明确导入可以解决问题，但我不确定这是否正确。 - LordDraagon

这并不能解决我的问题，对我来说太多了。我不得不使用Pipe而不是rxjs/add/operator/map。我使用了rxjs/operators导入和.pipe(map(res=>res.json())); - codefreaK

我是通过一些谷歌搜索来到这里的，现在我们正在使用Angular 7，而RXJS已经经历了一些变化。新的方法是import { map } from 'rxjs/operators'，但是另一个答案有更多细节。 - CTheCheese

Answer 2

我把我的gulp-typescript插件升级到了最新版本（2.13.0），现在编译没有问题了。

更新1：之前我使用的是gulp-typescript 2.12.0版本。

更新2：如果你正在升级到Angular 2.0.0-rc.1，你需要在appBoot.ts文件中进行以下操作：

///<reference path="./../typings/browser/ambient/es6-shim/index.d.ts"/>
import { bootstrap } from "@angular/platform-browser-dynamic";
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from "./path/AppComponent";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
// import 'rxjs/Rx'; this will load all features
import { enableProdMode } from '@angular/core';
import { Title } from '@angular/platform-browser';



//enableProdMode();
bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    Title
]);

重要的是对es6-shim/index.d.ts的引用。

这假设您已按此处所示安装了es6-shim类型： 有关Angular中typings安装的更多信息，请参见此处：https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings。

- brando

---

@Meligy 我之前使用的是 gulp-typescript 版本 2.12.0。 - brando

太棒了。我已经更新了我的文章，加入了一条注释，以帮助遇到类似问题的用户。非常感谢 :) - Meligy

@Meligy 当我升级到Angular2 RC时，我再次遇到了这个问题。我更新了我的答案以展示我是如何解决它的。 - brando

导入 'rxjs/Rx'; // 加载所有特性。 - VahidN

我发现了拼写错误。@Brando，谢谢您的回答。世界回到了正常。 - Darshan Puranik

Answer 3

Rxjs 5.5“ Property 'map'在类型Observable上不存在。

问题与您需要在所有操作符周围添加管道有关。

更改此处，

this.myObservable().map(data => {})

变成这个样子

this.myObservable().pipe(map(data => {}))

像这样导入映射关系，

import { map } from 'rxjs/operators';

它将解决你的问题。

- Hiran D.A Walawage

---

这也适用于Rxjs 6。我查看的每个教程都使用了没有管道符的map函数。直到我按照答案所述添加了管道并从'rxjs/operators'导入map函数，它才对我起作用。 - Saturn K

是的，这同样适用于 Rxjs 6。 - Hiran D.A Walawage

Answer 4

对我来说，仅包含地图和承诺不足以解决问题：

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

我按照官方文档的建议，通过导入多个rxjs组件来解决了这个问题：

1）在一个app/rxjs-operators.ts文件中导入语句：

// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable

// See node_module/rxjs/Rxjs.js
// Import just the rxjs statics and operators we need for THIS app.

// Statics
import 'rxjs/add/observable/throw';

// Operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

2) 在您的服务中导入rxjs-operator本身：

// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';

- Alex Valchuk

---

再次出现了最佳答案并非得票最多的情况。这是此问题的最佳答案。感谢您的分享。我希望其他人能够支持此回答。 - frosty

Answer 5

如果您在VS2015中看到这个错误，可以在这里找到一个github问题和解决方法: https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-229506507 这确实帮助我解决了 "property map does not exist on observable" 的问题。 此外，请确保您的typescript版本高于1.8.2。

- Abu Abdullah

---

将C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js替换为typescriptService，可以解决在VS 15中的问题。(替换文件后重新启动VS) - tchelidze

替换上述文件对我也起作用了。 - Krishnan

微软还没有更新...他们为什么不修复它？ - Piotrek

Answer 6

对于使用Angular 6的人的最终答案:

在您的*.service.ts文件中添加以下命令：

import { map } from "rxjs/operators";

**********************************************Example**Below**************************************
getPosts(){
this.http.get('http://jsonplaceholder.typicode.com/posts')
.pipe(map(res => res.json()));
}
}

我正在使用Windows 10操作系统；

使用Angular6和TypeScript V 2.3.4.0。

- Smit Patel

---

看起来我们不能再只在app.module.ts中导入它了。现在我们需要在每个服务和组件中导入它。 - Adam Mendoza

Answer 7

import 'rxjs/add/operator/map';

&

npm install rxjs@6 rxjs-compat@6 --save

这个对我有用。

- Justin Lange

Answer 8

在Angular 2x中

在example.component.ts文件中

import { Observable } from 'rxjs';

在example.component.html中

  Observable.interval(2000).map(valor => 'Async value');

在 Angular 5x 或 Angular 6x 中：

在 example.component.ts 文件中：

import { Observable, interval, pipe } from 'rxjs';
import {switchMap, map} from 'rxjs/operators';

在example.component.html中

valorAsync = interval(2500).pipe(map(valor => 'Async value'));

- Eduardo Cordeiro

---

为什么我们需要使用管道而不是直接使用map？ - Krish

Answer 9

更新于2016年9月29日，适用于Angular 2.0正式版和VS 2015

不再需要此解决方法，只需安装TypeScript 2.0.3版本即可修复。

修复方案来自此GitHub问题评论的编辑。

- Jason Watmore

---

我有这个问题，我也安装了2.0.3:/ - Mild Fuzz

我有TS 2.1.6，但仍然遇到了这个问题。 - alltej

在本评论发布时，TS的最新版本是2.5.2。但这个版本对我来说有问题。使用2.3.x版本可以解决。 - PigBoT

Answer 10

据我所了解，这是由于 rxjs 最近的更新。他们改变了一些操作符和语法。因此，我们现在应该像这样导入 rxjs 操作符：

import { map } from "rxjs/operators";

而不是这样：

import 'rxjs/add/operator/map';

我们需要在所有操作符周围添加管道符，就像这样

this.myObservable().pipe(map(data => {}))

源代码在这里

- Gh111