web-dev-qa-db-fra.com

Angular2 RxJS obtenant 'Observable_1.Observable.fromEvent n'est pas une fonction' erreur

J'utilise AngularJS 2 Beta 0 et j'essaie de créer un observable RxJS à partir d'un événement sur un objet window. Je crois connaître la formule pour capturer l'événement en tant qu'observable à mon service:

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

Le problème est que chaque fois que j'essaye d'exécuter ce code, j'obtiens une erreur indiquant que "fromEvent" n'est pas une fonction.

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

Cela semble impliquer que je ne traite pas correctement mon import maintenant que RxJS n'est pas inclus dans la construction de Angular 2, bien que le reste de mon application fonctionne correctement , ce qui pour moi signifie que RxJS est où il est censé être.

Mon import dans le service ressemble à ceci:

import {Observable} from 'rxjs/Observable';

Bien que j'ai également essayé d'utiliser ceci à la place (avec les modifications appropriées du code), avec les mêmes résultats:

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

J'ai la configuration suivante dans mon index.html:

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

Quelqu'un peut-il me dire ce que je fais mal?

javascriptangulartypescriptrxjsreactive-extensions-js
49
Michael Oryl

Il n'est absolument pas nécessaire d'importer tous les opérateurs en même temps! Vous venez d'importer fromEvent faux. Vous pouvez le faire comme ceci:

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

EDIT: En plus de ce que j’avais déjà écrit: le shake-tree avec le compilateur AoT de angular supprime le code inutilisé, en fonction de ce que vous importez. Si vous importez seulement des objets ou des fonctions de rxjs/rx, le compilateur ne peut rien supprimer, importez toujours ce dont vous avez besoin!

100
sclausen

Le problème semblait être que la déclaration d'importation devrait ressembler à ceci:

import {Observable} from 'rxjs/Rx';

Notez que Observable est importé de rxjs/Rx Au lieu de rxjs/Observable. Comme @EricMartinez le mentionne , le tirer de cette manière obtiendra automatiquement tous les opérateurs (comme .map()).

74
Michael Oryl