Angular 2 的 Http 服务不暴露 map() 和其他 RxJS 函数

Question

有人知道 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 () => { };
    });
} 

Answer 1

另一个更新 （咳，抱歉，忘记了这个选项）

如果您想避免单独添加运算符，您可以通过以下方式导入完整的 Rx

import {Observable, Subject, ReplaySubject, etc...} from 'rxjs/Rx';

你将拥有所有的运营商:)

更新 alpha 50（08/12/2015）

在 alpha 49 发布后不久，他们发布了 alpha 50。这个版本将 rxjs 升级到了 alpha 14。所以你会很好地去做

npm install angular2@latest
npm install rxjs@5.0.0-alpha.14

更新 alpha 49（2015 年 8 月 12 日）

截至目前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';

注意

这个版本需要alpha 13 版本，所以如果你的package.json 已经有另一个版本，你必须删除它，安装angular2，然后安装rjxs。

更新

CHANGELOG 已更新以显示此重大更改。 issue #5642 中有一个 comment from @jeffbcross 澄清了这件事的很多内容。

引用该评论的一部分

模块化从一开始就是新 RxJS 项目的目标，直到最近我们才真正开始认真对待组合运算符，而不是依赖于 Rx 的分层分布。

原答案

实际上，RxJS 和 Angular2 发生了重大变化。所以现在要使用像map 这样的运算符，你必须单独导入它们。你可以在这个pull request 中看到变化。并且已经有一个 issue 关于您的问题。

我建议你坚持使用 alpha 47。但是对于每个需要并想知道解决方案是什么的人，就像在拉取请求中指定的那样，单独添加运算符。

你必须有这样的东西

import {Http, ...} ...;

// Component
constructor(http: Http) {
    http.get(...).map() // 'map' doesn't exist! Ouch!
}

要修复它，添加操作符（抱歉重复了这么多次）并配置到 rxjs 的路径

注意

这必须使用 RxJS alpha 11 或 alpha 12 来完成（不要将它与 @reactivex/rxjs 混淆，现在它只是 rxjs）。所以用

安装它

npm install rxjs@5.0.0-alpha.11

如果你想要最新的，或者只是 npm install rxjs，尽管他们 lock it 是 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'
    }
});

配置完成后，可以如下导入算子

 import 'rxjs/operators/map';

仅此而已。您必须对每个操作员都这样做。所以我再说一遍，我建议你坚持使用 alpha 47，就像我在评论中告诉你的那样。稍后我会尝试用 plnkr 更新答案。

Answer 2

如果您想使用 Angular 2 的 Beta 版本或未来的实际生产版本，那么您需要做两件事才能使其正常工作。

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) 然后你可以将map() 和其他（或所有）RxJS 运算符导入到你的应用程序中，并在你的主文件中使用import 行（在我的例子中是app.ts）：

import 'rxjs/Rx'; // this would import all RxJS operators

如果您宁愿只导入 map() 以减小大小，您可以这样做：

import 'rxjs/add/operator/map';

您不需要将这些导入到每个类文件中。只需将它们导入到您的主文件中，以使您的所有其他组件/服务/指令都可以访问它们。

Answer 3

您需要在组件中导入 Rx 映射运算符，例如

import 'rxjs/add/operator/map';

干杯！

Answer 4

对比上面写的，发现需要用到

    System.config({
        packages: {
            'app': {defaultExtension: 'js'},
            'node_modules': {defaultExtension: 'js'}
        },
        paths: {
            'rxjs/*' : 'node_modules/rxjs/*.js'
        }
    });

node_modulesdefaultExtension 是我的批判性思维（我不知道为什么 rxjs/* 路径没有添加 .js，但是嘿嘿。）

这适用于从 48 到最新的 52。

Answer 5

我遇到了这个问题，结果证明是 rxjs 版本的问题 - angular 2.0.0-rc4 需要 rxjs-5.0.0-beta.6，我的 jspm 配置中有 beta.10！