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 正在返回一个可观察值。这意味着地图功能应该可用。任何帮助，将不胜感激。谢谢！

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 (08/12/2015)

截至目前 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 was updated to show this breaking change. There's a comment from @jeffbcross in issue #5642在这件事上澄清了很多。

引用该评论的一部分

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 和 Angular2 实际上有一个突破性的变化。所以现在要使用像 map 这样的运算符，你必须单独导入它们。您可以在 pull request. And there's already an 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'
    }
});

配置完成后，可以按如下方式导入operator

 import 'rxjs/operators/map';

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

Answer 2

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

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

node_modules defaultExtension 对我来说是批判性的思考（我不知道为什么 rxjs/* 路径不添加 .js 但是嘿嘿。）

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

Answer 3

如果您想使用 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';

您不需要将这些导入到每个class文件中。只需将它们导入您的主文件即可让所有其他 components/services/directives.

访问它们

Answer 4

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

import 'rxjs/add/operator/map';

干杯！

Answer 5

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

Angular 2 的 Http 服务未公开 map() 和其他 RxJS 函数

Angular 2's Http service not exposing map() and other RxJS functions

rxjs

typescript

angular