web-dev-qa-db-ja.com

Angular 2のHttpサービスがmap（）および他のRxJS関数を公開しない

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 () => { };
    });
}
typescriptangularrxjs
13
Zorthgo

別の更新（咳、申し訳ありませんが、このオプションを忘れました）

演算子を個別に追加したくない場合は、次のようにして完全なRxをインポートできます。

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

あなたはすべての演算子を持っています:)

アルファ50を更新（2015年8月12日）

Alpha 49がリリースされた直後に、彼らはalpha 50をリリースしました。このバージョンはrxjsをalpha 14にアップグレードしました。

npm install angular2@latest
npm install [email protected]

アルファ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 [〜＃〜] が更新され、この重大な変更が示されました。 問題＃5642 に @ jeffbcrossからのコメント があり、この問題の詳細を明らかにしています。

そのコメントの引用部分

モジュール性は当初から新しいRxJSプロジェクトの目標であり、Rxの階層化されたディストリビューションに依存するのではなく、オペレーターの作成について真剣に取り組むようになったのは最近のことでした。

元の答え

実際、RxJSとAngular2に関して重大な変更がありました。したがって、mapのような演算子を使用するには、それらを個別にインポートする必要があります。この pull request の変更を確認できます。そして、あなたの質問についてはすでに issue があります。

アルファ47を使用することをお勧めします。ただし、プルリクエストのように、ソリューションが何であるかを知り、それを知りたい場合は、オペレーターを個別に追加します。

あなたはこのようなものを持っている必要があります

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

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

それを修正するには、演算子を追加し（何度も繰り返して申し訳ありません）、rxjsへのパスを構成します

注

これは、RxJSアルファ11またはアルファ12で行う必要があります（_@reactivex/rxjsと混同しないでください。現在はrxjsです）。だからそれをインストールする

npm install [email protected]

または、最新のものが必要な場合はnpm install rxjsを使用しますが、 ロックする はアルファ11になります。

System.configでパスを構成します（これは私の構成であり、必ずしも最良の構成ではないことに注意してください。アルファ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';

そして、それだけです。すべてのオペレーターでそれを行う必要があります。繰り返しますが、コメントでお伝えしたように、アルファ47を使用することをお勧めします。後でplnkrを使用して回答を更新します。

31
Eric Martinez

Angular 2または将来の実際の製品リリースのベータ版を使用する場合、これを機能させるには2つのことを行う必要があります。

1）最初に、RxJSへの参照を含めるように、index.htmlのSystem.config（）構成を更新する必要があります。

_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）次に、メインファイルのimport行を使用して、map()および他の（またはすべての）RxJS演算子をアプリケーションにインポートできます（私の場合はapp.ts）：

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

サイズを小さく保つためにmap()だけをインポートする場合は、代わりに次のようにします。

_import 'rxjs/add/operator/map';
_

しないでくださいこれらを各クラスファイルにインポートする必要があります。それらをメインファイルにインポートして、他のすべてのコンポーネント/サービス/ディレクティブからアクセスできるようにします。

14
Michael Oryl

あなたのようなコンポーネントにRxマップ演算子をインポートする必要があります

import 'rxjs/add/operator/map';

乾杯！

5
dheeran

上記の内容とは対照的に、私は使用する必要があることがわかりました

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

node_modulesdefaultExtensionは私にとって重要な考えでした（rxjs/*パスが.jsを追加しない理由はわかりませんが、ほらほら。）

これは48から最新の52まで機能します。

0
Fergus Gallagher

この問題があり、rxjsのバージョンの問題であることが判明しました-angular 2.0.0-rc4にはrxjs-5.0.0-beta.6が必要です。beta.10が含まれていました私のjspm設定！

0
Graham King