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

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. “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：环境模块声明无法指定相对模块名称。

我已经看到了这个问题/答案，但它没有解决问题：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
]);

有人知道发生了什么事吗？

Answer 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 

Answer 2

我遇到了类似的错误。做了这三件事就解决了：

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

Answer 3

使用 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()));
}
}

我正在使用 窗户 10;

angular6 与 typescript V 2.3.4.0

Answer 4

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

import 'rxjs/add/operator/map';

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

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

Answer 5

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

import { map } from "rxjs/operators";

而不是这个

import 'rxjs/add/operator/map';

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

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

来源是here

Answer 6

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

Answer 7

正如贾斯汀斯科菲尔德在他的回答中所建议的那样，对于 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 导入依赖错误得到解决！

Answer 8

import 'rxjs/add/operator/map';

&

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

为我工作

Answer 9

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

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

改变这个，

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

到这里

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

和

像这样导入地图，

import { map } from 'rxjs/operators';

它会解决你的问题。

Answer 10

从版本 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);

Answer 11

需要导入map操作符：

import 'rxjs/add/operator/map'

Answer 12

2016 年 9 月 29 日更新 Angular 2.0 Final 和 VS 2015

不再需要解决方法，要修复你只需要install TypeScript version 2.0.3。

从 this github issue comment 的编辑中获取的修复。

Answer 13

就我而言，仅包含 map 和 promise 是不够的：

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

我按照official documentation 的建议导入了几个 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';

Answer 14

我将我的 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

Answer 15

如果您碰巧在 VS2015 中看到此错误，这里提到了一个 github 问题和解决方法：

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

这确实帮助我解决了property map does not exist on observable 问题。 此外，请确保您的 typescript 版本高于 1.8.2

Answer 16

看起来最新的 RxJS 需要 typescript 1.8，所以 typescript 1.7 报告上述错误。

我通过升级到最新的 typescript 版本解决了这个问题。