typescript Angular 2 的 Http 服务没有暴露 map() 和其他 RxJS 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34113750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2's Http service not exposing map() and other RxJS functions
提问by Zorthgo
Does anybody know if there's been any breaking changes to the http between alpha 45 and alpha 48? I've been searching around and I didn't find anything. My problem is that the code below was working perfectly on Alpha 45. But now that I've upgraded to Alpha 48 I am getting a _this.http.post(...).map is not a functionerror message when I try to run the application. The strange thing is that IntelliSense shows that http.post is returning an observable. Which means that the map function should be available. Any help would be appreciated. Thanks!
有人知道 alpha 45 和 alpha 48 之间的 http 是否有任何重大变化吗？我一直在四处寻找，但没有找到任何东西。我的问题是下面的代码在 Alpha 45 上运行良好。但是现在我已经升级到 Alpha 48，_this.http.post(...).map is not a function当我尝试运行应用程序时收到一条错误消息。奇怪的是 IntelliSense 显示 http.post 正在返回一个 observable。这意味着地图功能应该可用。任何帮助，将不胜感激。谢谢！
public Authenticate(username: string, password: string): Observable<boolean> {
this.ResetAuthenticationValues();
return Observable.create((subscriber: EventEmitter<string>) => {
let body: string = 'grant_type=password&username=' + username + '&password=' + password;
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
this.http.post('http://example.com', body, {headers: headers})
.map(res => res.json())
.subscribe(
(data: DataResponse) => {
if (!data.error) {
this.accessToken = {access_token: data.access_token, token_type: data.token_type};
subscriber.next(this.isAuthenticated = true);
}
else
subscriber.error(this.isAuthenticated = false);
},
(err) => subscriber.error(err),
() => subscriber.complete()
);
return () => { };
});
}
回答by Eric Martinez
Another update(cough, sorry about that, forgot this option)
另一个更新（咳咳，抱歉，忘了这个选项）
If you want to avoid adding individually the operators you can import the full Rx by doing
如果您想避免单独添加运算符，您可以通过执行以下操作导入完整的 Rx
import {Observable, Subject, ReplaySubject, etc...} from 'rxjs/Rx';
You'll have all the operators :)
您将拥有所有操作员:)
Update alpha 50(08/12/2015)
更新 alpha 50(08/12/2015)
Shortly after alpha 49 was released, they released alpha 50. This version upgraded rxjs to alpha 14. So you'll good to go by doing
在 alpha 49 发布后不久，他们发布了 alpha 50。这个版本将 rxjs 升级到了 alpha 14。所以你会很高兴去做
npm install angular2@latest
npm install [email protected]
Update alpha 49(08/12/2015)
更新 alpha 49(08/12/2015)
As of now alpha 49was released and this didn't change, which means this will remain in time. The original answer is still valid with a few changes, paths changed for rjxs, so it should be as follows :
截至目前，alpha 49已发布，这并没有改变，这意味着这将及时保留。原始答案仍然有效，但有一些更改，rjxs 的路径已更改，因此应如下所示：
System.config({
paths: {
'rxjs/add/observable/*' : 'node_modules/rxjs/add/observable/*.js',
'rxjs/add/operator/*' : 'node_modules/rxjs/add/operator/*.js',
'rxjs/*' : 'node_modules/rxjs/*.js'
}
});
import 'rxjs/add/operator/map';
Note
笔记
This version requires exactly the alpha 13version, so if in your package.jsonyou have already another version, you'll have to remove it, install angular2, and then install rjxs.
此版本需要完全相同的alpha 13版本，因此如果package.json您已经有另一个版本，则必须将其删除，安装 angular2，然后安装 rjxs。
Update
更新
The CHANGELOGwas updated to show this breaking change. There's a comment from @jeffbcrossin issue #5642that clarifies a LOT in this matter.
该更新日志被更新，以显示这个重大更改。@jeffbcross在issue #5642中有一条评论澄清了这个问题。
Quoting part of that comment
引用该评论的一部分
Modularity was a goal of the new RxJS project from the start, and it wasn't until recently that we started really getting serious about composing operators instead of relying on tiered distributions of Rx.
模块化从一开始就是新 RxJS 项目的目标，直到最近我们才开始真正认真地考虑组合运算符而不是依赖 Rx 的分层分布。
Original answer
原答案
There was actually a breaking change regarding RxJS and Angular2. So now to use operators like mapyou have to import them separately. You can see the change in this pull request. And there's already an issueabout your question.
实际上，RxJS 和 Angular2 发生了重大变化。所以现在要使用像map你这样的操作符，你必须分别导入它们。您可以在此拉取请求中看到更改。你的问题已经有问题了。
I recommend you to stick to alpha 47. But to everyone who needs and want to know what the solution is, like in the pull request is specified, to add the operator separately.
我建议你坚持使用 alpha 47。但是对于需要并想知道解决方案是什么的每个人，就像在拉取请求中指定的那样，单独添加操作符。
You must have something like this
你一定有这样的东西
import {Http, ...} ...;
// Component
constructor(http: Http) {
http.get(...).map() // 'map' doesn't exist! Ouch!
}
To fix it, add the operator (sorry for repeating it so many times) and configure the paths to rxjs
要修复它，添加操作符（抱歉重复了很多次）并配置到 rxjs 的路径
Note
笔记
This must be done with RxJS alpha 11, or alpha 12 (don't confuse it with @reactivex/rxjs, now it's just rxjs). So install it with
这必须使用 RxJS alpha 11 或 alpha 12 来完成（不要将它与 混淆@reactivex/rxjs，现在它只是rxjs）。所以安装它
npm install [email protected]
Or just npm install rxjsif you want the latest, although they lock itto be alpha 11.
或者只是npm install rxjs如果您想要最新的，尽管他们将其锁定为 alpha 11。
Configure the paths in your System.config (note that this is my config, not necessarily the best and I'm assuming you installed alpha 11)
在 System.config 中配置路径（请注意，这是我的配置，不一定是最好的，我假设您安装了 alpha 11）
System.config({
paths: {
'rxjs/observable/*' : 'node_modules/rxjs/observable/*.js',
'rxjs/operators/*' : 'node_modules/rxjs/operators/*.js',
'rxjs/*' : 'node_modules/rxjs/*.js'
}
});
After you are done with the configuration, you can import the operator as follows
完成配置后，您可以按如下方式导入操作符
import 'rxjs/operators/map';
And that's all. You'll have to do that with every operator. So I repeat, I recommend you to stick to alpha 47, like I told you in the comment. I will try to update the answer later with a plnkr.
就这样。您必须对每个操作员都这样做。所以我再说一遍，我建议你坚持使用 alpha 47，就像我在评论中告诉你的那样。稍后我将尝试使用 plnkr 更新答案。
回答by Michael Oryl
If you want to use the Beta versions of Angular 2 or the future real production releases, then you need to do two things to get this to work.
如果您想使用 Angular 2 的 Beta 版本或未来的实际生产版本，那么您需要做两件事才能使其工作。
1) You'll first need to update your System.config() configuration in index.html to include references to RxJS:
1) 您首先需要更新 index.html 中的 System.config() 配置以包含对 RxJS 的引用：
System.config({
map: {
'rxjs': 'node_modules/rxjs'
},
packages: {
'app': {defaultExtension: 'js'}, // assumes your code sites in `src/app`
'rxjs': {defaultExtension: 'js'}
}
});
System.import('app/app'); // this assumes your main file is `app.ts` and it sits in the `app` folder.
2) Then you can import map()and other (or all) RxJS operators into your application with importlines in your main file (app.ts in my case):
2）然后您可以map()使用import主文件（在我的情况下为 app.ts ）中的行将其他（或全部）RxJS 运算符导入到您的应用程序中：
import 'rxjs/Rx'; // this would import all RxJS operators
If you rather import just map()to keep the size down, you would do this instead:
如果您只想导入map()以减小尺寸，您可以这样做：
import 'rxjs/add/operator/map';
You do notneed to import these into each class file. Just import them into your main file to make them accessible to all your other components/services/directives.
你并不需要这些文件导入到每个类文件。只需将它们导入您的主文件，即可让您的所有其他组件/服务/指令访问它们。
回答by Mohanraj Balasubramaniam
You need to import the Rx map operator in your component like
您需要在组件中导入 Rx 映射运算符，例如
import 'rxjs/add/operator/map';
Cheers!
干杯!
回答by Graham King
I had this issue and it turned out to be an issue with the version of rxjs - angular 2.0.0-rc4 requires rxjs-5.0.0-beta.6, I had beta.10 in my jspm config!
我遇到了这个问题，结果证明是 rxjs 版本的问题 - angular 2.0.0-rc4 需要 rxjs-5.0.0-beta.6，我的 jspm 配置中有 beta.10！
回答by Fergus Gallagher
In contrast to what what's written above, I found that I needed to use
与上面写的相反，我发现我需要使用
System.config({
packages: {
'app': {defaultExtension: 'js'},
'node_modules': {defaultExtension: 'js'}
},
paths: {
'rxjs/*' : 'node_modules/rxjs/*.js'
}
});
The node_modulesdefaultExtensionwas the critical think for me (I dunno why the rxjs/*path doesn't add the .jsbut hey ho.)
这node_modulesdefaultExtension是对我的批判性思考（我不知道为什么rxjs/*路径不添加.js但是嘿嘿。）
This works from 48 to the latest 52.
这适用于 48 到最新的 52。
