web-dev-qa-db-ja.com

「Observable_1.Observable.fromEventは関数ではありません」というエラーを取得するAngular2 RxJS

AngularJS 2 Beta 0を使用しており、ウィンドウオブジェクトのイベントからRxJS Observableを作成しようとしています。私のサービスでイベントをObservableとしてキャプチャするための公式を知っていると思います。

var observ = Observable.fromEvent(this.windowHandle, 'hashchange');

問題は、このコードを実行しようとするたびに、「fromEvent」が関数ではないことを示すエラーが表示されることです。

Uncaught EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: Observable_1.Observable.fromEvent is not a function

これは、RxJSがAngular 2のビルドに含まれていないため、importを正しく処理していないことを暗示しているようです。 RxJSが本来あるべき場所にあることを意味します。

サービスへの私のインポートは次のようになります。

import {Observable} from 'rxjs/Observable';

私は代わりにこれを（コードに適切な変更を加えて）使用しようとしましたが、同じ結果になりました：

import {FromEventObservable} from 'rxjs/observable/fromEvent';

Index.htmlに次の構成があります。

<script>
    System.config({
        map: {
            rxjs: 'node_modules/rxjs'
        },
        packages: {
            'app': {defaultExtension: 'js'},
            'rxjs': {defaultExtension: 'js'}
        }
    });
    System.import('app/app');
</script>

誰かが私が間違っていることを教えてもらえますか？

javascriptangulartypescriptrxjsreactive-extensions-js
49
Michael Oryl

すべての演算子を一度にインポートする必要はありません！ fromEventを間違ってインポートしました。次のようにできます：

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';

編集：すでに書いたものに加えて：angularのAoTコンパイラーによるツリーシェーキングは、インポートした内容に基づいて未使用のコードを削除します。 rxjs/rxからオブジェクトまたは関数をインポートするだけでは、コンパイラは何も削除できません。常に必要なものだけをインポートしてください！

100
sclausen

問題は、importステートメントが次のように見えることであるように思われました。

import {Observable} from 'rxjs/Rx';

Observableはrxjs/Rxからではなく、rxjs/Observableから取り込まれていることに注意してください。 @ EricMartinezが述べているように 、この方法でプルすると、すべての演算子（.map()など）が自動的に取得されます。

74
Michael Oryl