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(216):error TS2435:Ambient模块不能嵌套在其他模块或名称空间中.
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
]);

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

Answer 1

您需要导入map运算符:

import 'rxjs/add/operator/map'

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安装的类型:https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings

Answer 3

Rxjs 5.5"属性'地图'在类型Observable上不存在.

问题与您需要在所有运营商周围添加管道有关.

改变这个,

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

对此

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

和

导入这样的地图,

import { map } from 'rxjs/operators';

它将解决您的问题.

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

Answer 5

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

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

这确实帮助我解决了这个property map does not exist on observable问题.此外,请确保您的打字稿版本高于1.8.2

Answer 6

对于那些使用角度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与打字稿V 2.3.4.0

Answer 7

import 'rxjs/add/operator/map';

&

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

为我工作

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

Answer 9

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

不再需要解决方法,修复您只需要安装TypeScript版本2.0.3.

修复此github问题评论的编辑.

Answer 10

据我所知,这是因为rxjs上次更新.他们改变了一些运算符和语法.此后我们应该rx像这样导入运营商

import { map } from "rxjs/operators";

而不是这个

import 'rxjs/add/operator/map';

我们需要在这样的所有运营商周围添加管道

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

来源就在这里

Answer 11

正如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导入依赖性错误得到解决!

Answer 12

我面临着类似的错误.当我做这三件事时它就解决了:

1. 更新到最新的rxjs:

__CODE__

2. 导入地图和承诺:

   __CODE__

3. 添加了新的import语句:

__CODE__

Answer 13

看起来最新的RxJS需要typescript 1.8,因此typescript 1.7报告了上述错误.

我通过升级到最新的打字稿版本解决了这个问题.

Answer 14

从版本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 15

如果您使用angular4，请在导入下面使用。它应该工作。

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

如果您使用的是angular5 / 6，则将map与管道配合使用，并在1以下导入

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