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


195

我刚刚从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功能的所有功能都运行良好。升级后出现以下错误,并且在打字稿尝试转换时发生:

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

我已经看到了这个问题/答案,但并不能解决问题: Angular2 beta.12和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
]);

有人知道干草堆发生了什么吗?


Answers:


284

您需要导入map运算符:

import 'rxjs/add/operator/map'

3
Angular团队和RxJS团队都不推荐这种导入整个RX的方法。你不应该那样做。太大了 上面的第一个答案很好,但是第二个答案不是很多。@ 0x1ad2您可以更新答案以不将大量导入作为第二选择吗?
霜冻

2
这是不直观的。在Angular 2+开发中,这在哪里被记录为依赖于实现Observable?

这适用于离子3.20.0吗?我遇到了同样的问题,因为ionic不会自动导入地图。显式导入有效,但我不确定这是正确的。
LordDraagon

1
这对我来说并没有解决很多问题,我不得不使用Pipe代替rxjs / add / operator / map,而我使用rxjs / operators import与pipe和.pipe(map(res => res.json()));
codefreaK

经过一段时间的Google搜索之后,我来到了这里,当时我们正在使用Angular 7,而RXJS进行了一些更改。新方法是import { map } from 'rxjs/operators',但是另一个答案有更多详细信息。
Colby Hunter

78

我将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安装的更多打字信息,请访问:https ://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings


您能否提及出现问题的旧版本号?谢谢。
Meligy '16

1
@Meligy我以前使用一饮而尽,打字稿版本2.12.0
白兰度

1
太棒了 我已经更新了有关map错误消息的文章,其中包括针对具有类似问题的用户的说明。非常感谢:)
Meligy '16

1
@Meligy当我升级到Angular2 RC时,我又遇到了同样的问题。我更新了上面的答案,以显示如何解决。
Brando

6
import 'rxjs/Rx'; //加载所有功能
VahidN

67

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

问题与您需要在所有运算符周围添加管道这一事实有关。

改变这个

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

对此

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

像这样导入地图,

import { map } from 'rxjs/operators';

它将解决您的问题。


3
这也适用于Rxjs6。我查看的每个教程都具有不带管道的map函数。在我添加管道并从“ rxjs / operators”导入的地图完全符合答案之前,这对我不起作用。
Keyvan Sadralodabai

是的,它也适用于Rxjs 6。
Hiran DA Walawage,

41

就我而言,仅包含map和promise是不够的:

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';

再说一次,关于这个问题的最佳答案得票最多。这是此问题的最佳答案。感谢你的分享。我希望其他人对此表示赞成。
霜冻

26

如果您碰巧在VS2015中看到此错误,则此处提到了github问题和解决方法:

https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-229506507

这确实帮助我解决了property map does not exist on observable问题。此外,请确保您拥有打字稿版本1.8.2以上


8
更换C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js typescriptService工作了15 VS(重启VS替换文件后
tchelidze

替换上述文件对我也
有用

仍然没有来自Microsoft的更新...为什么他们不修复它?
Piotrek

26

使用角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;

带有打字稿V 2.3.4.0的angular6


看来我们不能再将其导入app.module.ts中。现在我们需要将其导入每个服务和组件中
Adam Mendoza,


13

在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'));

1
为什么我们需要使用管道代替直接映射?
Krish


10

据我了解,这是因为rxjs最近一次更新。他们更改了一些运算符和语法。此后,我们应该rx像这样导入运算符

import { map } from "rxjs/operators";

代替这个

import 'rxjs/add/operator/map';

我们需要像这样在所有运算符周围添加管道

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

来源在这里


9

正如贾斯汀·斯科菲尔德(Justin Scofield)在他的答案中所建议的那样,对于Angular 5的最新版本和Angular 6,截至2018年6月1日,这import 'rxjs/add/operator/map';还不足以消除TS错误: [ts] Property 'map' does not exist on type 'Observable<Object>'.

必须运行以下命令来安装所需的依赖项: npm install rxjs@6 rxjs-compat@6 --save此后,map解决导入依赖项错误!


1
看起来更令人
震惊的

8

我正面临类似的错误。当我完成以下三件事时,它就解决了:

  1. 更新到最新的rxjs:

    npm install rxjs@6 rxjs-compat@6 --save
  2. 导入地图并承诺:

    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/toPromise';
  3. 添加了新的导入语句:

    import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';


6

从版本5过渡到6时,将弹出类似的错误消息。这是对rxjs-6进行更改的答案。

导入各个运算符,然后使用pipe而不是链接。

import { map, delay, catchError } from 'rxjs/operators'; 

source.pipe(
  map(x => x + x),
  delay(4000),
  catchError(err => of('error found')),
).subscribe(printResult);

6

如果您使用的是angular4,请使用以下导入。它应该工作。

导入'rxjs / add / operator / map';

如果您使用的是angular5 / 6,则使用带有管道的贴图并在下面导入

从“ rxjs / operators”导入{map};


1

类型“可观察到的响应”角度6不存在属性“地图”

解决方案: 更新Angular CLI和核心版本

ng update @angular/cli           //Update Angular CLi 
ng update @angular/core          //Update Angular Core 
npm install --save rxjs-compat   //For Map Call For Post Method 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.