我刚刚从 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 功能,一切都运行良好。我升级后出现以下错误,并且在打字稿尝试转译时发生:
'Observable' 类型上不存在属性 'map'(我在任何地方使用带有 observable 的地图)c:/path/node_modules/rxjs/add/operator/map.d.ts(2,16):错误 TS2435 : 环境模块不能嵌套在其他模块或命名空间中。 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
]);
有人知道发生了什么事情吗?
您需要导入 map
运算符:
import 'rxjs/add/operator/map'
我将我的 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
https://i.stack.imgur.com/obfiM.jpg
有关从 Angular 安装的类型的更多信息:https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings
map
错误消息的文章,其中包含针对有类似问题的用户的注释。非常感谢 :)
import 'rxjs/Rx';
// 加载所有功能
Rxjs 5.5“ Observable 类型上不存在属性‘map’。
问题与您需要在所有运算符周围添加管道有关。
改变这个,
this.myObservable().map(data => {})
对此
this.myObservable().pipe(map(data => {}))
和
像这样导入地图,
import { map } from 'rxjs/operators';
它将解决您的问题。
就我而言,仅包含地图和承诺是不够的:
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';
如果您碰巧在 VS2015 中看到此错误,这里提到了一个 github 问题和解决方法:
https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-229506507
这确实帮助我解决了 property map does not exist on observable
问题。此外,请确保您的 typescript 版本高于 1.8.2
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js
替换为 typescriptService 适用于 VS 15。(重新启动与替换文件后)
使用 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;
带有打字稿V 2.3.4.0的angular6
import 'rxjs/add/operator/map';
&
npm install rxjs@6 rxjs-compat@6 --save
为我工作
在 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'));
2016 年 9 月 29 日更新 Angular 2.0 Final 和 VS 2015
不再需要解决方法,只需 install TypeScript version 2.0.3 即可修复。
从 this github issue comment 上的修改中提取的修正。
据我了解,这是因为 rxjs
上次更新。他们更改了一些运算符和语法。此后我们应该像这样导入 rx
运算符
import { map } from "rxjs/operators";
而不是这个
import 'rxjs/add/operator/map';
我们需要像这样在所有运算符周围添加管道
this.myObservable().pipe(map(data => {}))
来源是 here
正如贾斯汀斯科菲尔德在他的回答中所建议的那样,对于 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
导入依赖项错误得到解决!
我面临着类似的错误。当我做了这三件事时,它就解决了:
更新到最新的 rxjs: npm install rxjs@6 rxjs-compat@6 --save 导入地图并承诺: import 'rxjs/add/operator/map';导入'rxjs/add/operator/toPromise';添加了新的导入语句: import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
看起来最新的 RxJS 需要 typescript 1.8,所以 typescript 1.7 会报告上述错误。
我通过升级到最新的打字稿版本解决了这个问题。
从版本 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);
如果您使用的是 angular4,请使用以下导入。它应该工作。
导入'rxjs/add/operator/map';
如果您使用的是 angular5/6,则使用带有管道的 map 并导入低于 1
从“rxjs/operators”导入{地图};
属性“地图”在“可观察响应”类型上不存在 角度 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
import { map } from 'rxjs/operators'
,但 another answer 有更多详细信息。