Impossible d'importer "Rx" dans mon application Angular 2

Question

Je suis assez novice en matière d'Angular2. J'essaie de l'apprendre en utilisant une application factice.

J'ai récemment suivi un tutoriel sur RxJS et j'ai acquis des connaissances de base sur les Observables (ou du moins je le suppose). Sur cette base, j'ai l'idée de retourner une liste d'utilisateurs de mon tableau en service sous forme de flux. J'ai l'intention d'utiliser l'intervalle pour cela et d'afficher une sorte d'effet de chargement paresseux à l'écran.

Mon intention est quelque chose comme :

getUsers() {
        return Rx.Observable.from(this.users); //want to add interval too on this 
    }

Cependant, je suis bloqué lors de l'importation de "Rx" dans mon service. L'utilisation de 'Rx' sans importation me donne évidemment une erreur. Le reste des importations pour les Observables et l'opérateur fonctionne bien.

Je suis allé dans node_modules et j'ai trouvé qu'il y a une rx y un rxjs module également. Mais d'une manière ou d'une autre, en utilisant l'une des commandes ci-dessous, je ne peux pas me débarrasser de mon erreur sur Rx .

import 'rxjs/Rx';
import  Rx from 'rxjs/Rx';
import { Rx} from 'rx/Rx';
import { Rx} from 'rx';

J'ai parcouru quelques liens sur SO qui disent Rx n'est plus fourni avec Angular. Cependant, je travaille avec la dernière version officielle d'Angular et je constate que rx y rxjs paquets. J'ai un 5.0.1 version mentionnée dans package.json . Est-ce que je suppose quelque chose de mal ici ?

Veuillez m'indiquer comment procéder pour créer des observables personnalisés à l'aide de Rx dans Angular 2.

Note : Je n'ai aucun problème à utiliser l'Observable retourné par le service Http, je veux juste créer un Observable à partir de zéro en utilisant Array.

Answer 1

El rxjs doit déjà être une dépendance de votre projet. Vous pouvez lire comment importer correctement RxJS sur sa page officielle readme : https://github.com/ReactiveX/rxjs/#installation-and-usage

Le plus souvent, il suffit de l'utiliser :

import {Observable} from 'rxjs';

Notez que cela est différent de l'utilisation de la simple import {Rx} from 'rxjs'; parce que cela rechercherait une propriété exportée appelée Rx en el rxjs/Rx.d.ts mais une telle propriété n'existe pas.

El rx Le package RxJS est l'ancien RxJS 4, donc vous ne voulez certainement pas l'utiliser avec Angualr2.

Answer 2

Vous importez rxjs comme ceci.

import Rx from 'rxjs';

Et dans systemjs.config.js l'endroit du dossier comme ça.

 rxjs: {
    defaultExtension: 'js',
      main: 'Rx.js'
  }

Answer 3

Assurez-vous que dans votre system.config.js, votre objet de configuration a la valeur suivante : -.

var map = {
    'rxjs': 'node_modules/rxjs'
}

var packages = {
    'rxjs': {defaultExtension: 'js'}
}

System.config({
    map: map,
    packages: packages
});

Dans votre composant, il vous suffit de faire import 'rxjs/Rx'; et vous pourrez utiliser n'importe quoi dans rxjs ou vous pouvez faire import { Observable } from 'rxjs/Observable'; etc.

Answer 4

Si tout semble parfait dans votre code, il s'agit probablement d'un problème de compatibilité avec System.js.

1. Désinstaller rxjs
2. Vérifiez map pour la liste des dépendances d'Angular
3. Installez la même version de rxjs que celle utilisée par Angular.

Pour une raison quelconque, si la version que vous installez et la version utilisée par Angular sont différentes, les importations rxjs peuvent être interrompues.

Source : Je viens de rencontrer le même problème.

Answer 5

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/takeWhile';

Importez-le dans votre composant et intégrez le code ci-dessous dans une fonction pour obtenir ce que vous voulez.

Observable
      .interval(100)
      .takeWhile(x => x < 10)
      .subscribe(x => { console.log(x); });