it-swarm.dev

Angular2 RxJS otrzymuje błąd „Observable_1.Observable.fromEvent nie jest funkcją”

Korzystam z AngularJS 2 Beta 0 i próbuję utworzyć RxJS Observable na podstawie zdarzenia na obiekcie okna. Wydaje mi się, że znam formułę uchwycenia zdarzenia jako Obserwowalne w mojej usłudze:

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

Problem polega na tym, że za każdym razem, gdy próbuję uruchomić ten kod, pojawia się błąd informujący, że „fromEvent” nie jest funkcją.

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

To wydaje mi się sugerować, że nie obsługuję poprawnie mojego import teraz, gdy RxJS nie jest uwzględniony w kompilacji Angular 2, chociaż reszta mojej aplikacji działa poprawnie , co dla mnie oznacza, że ​​RxJS jest tam, gdzie powinno być.

Mój import w usłudze wygląda następująco:

import {Observable} from 'rxjs/Observable';

Chociaż próbowałem również tego użyć (z odpowiednimi zmianami w kodzie), z tymi samymi wynikami:

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

Mam następującą konfigurację w moim pliku Index.html:

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

Czy ktoś może mi powiedzieć, co robię niepoprawnie?

49
Michael Oryl

Zdecydowanie nie trzeba importować wszystkich operatorów jednocześnie! Właśnie zaimportowałeś fromEvent źle. Możesz to zrobić w następujący sposób:

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

EDYCJA: W uzupełnieniu do tego, co już napisałem: wstrząsanie drzewem za pomocą kompilatora AoT angular usuwa nieużywany kod na podstawie tego, co importujesz. Jeśli tylko zaimportujesz niektóre obiekty lub funkcje z rxjs/rx, kompilator nie może niczego usunąć. Zawsze importuj tylko to, czego potrzebujesz!

100
sclausen

Problem polegał na tym, że instrukcja importu powinna wyglądać następująco:

import {Observable} from 'rxjs/Rx';

Zauważ, że Observable jest pobierane z rxjs/Rx Zamiast z rxjs/Observable. jak wspomina @EricMartinez , pociągnięcie go w ten sposób spowoduje automatyczne uzyskanie wszystkich operatorów (takich jak .map()).

74
Michael Oryl