Syntaxe d'importation RXJS d'Angular 6 ?

Question

Je suis en train de migrer une application Angular 5 vers la dernière CLI et Angular 6 RC et toutes mes importations d'Observable sont cassées. Je vois qu'Angular 6 change la façon dont les importations fonctionnent, mais je ne trouve aucune référence précise sur la façon dont la syntaxe fonctionne.

J'avais ça en 5 et ça marchait bien :

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

Maintenant, avec la nouvelle syntaxe, je vois que

import { Observable, Subject, throwError} from 'rxjs';
import { map } from 'rxjs/operators';

Les deux premières lignes compilent, mais je n'arrive pas à comprendre comment obtenir catch et throw par exemple. .map() génère également une erreur de compilation lorsqu'il est utilisé dans le code.

Quelqu'un a-t-il une référence sur la façon dont cela est censé fonctionner ?

Answer 1

De rxjs 5.5 , catch a été renommé en catchError pour éviter les conflits de noms.

Comme les opérateurs sont disponibles indépendamment d'un Observable, les noms des opérateurs ne peuvent pas entrer en conflit avec les restrictions des mots-clés JavaScript. Par conséquent, les noms de la version "pipeable" de certains opérateurs ont changé.

import { catchError } from 'rxjs/operators';

Pour throw vous pouvez utiliser ErrorObservable .

import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
ErrorObservable.create(new Error("oops"));

rxjs 6

Au lieu de ErrorObservable, utilisez throwError .

 import { throwError } from 'rxjs'
 throwError(new Error("oops"));

De plus, vous devrez désormais canaliser les opérateurs au lieu de les enchaîner directement à l'observable.

Answer 2

Les tuyaux sont ce qui est requis pour le(s) opérateur(s) à l'avenir.

version : rxjs 6.0.1

Exemple :

import { Observable } from "rxjs";
import { map } from "rxjs/operators";

Observable.create((observer: any) => {
    observer.next('Hello')
}).pipe(map((val: any) => val.toUpperCase()))
  .subscribe((x: any) => addItem(x))

function addItem(val: any) {
    console.log('val', val);
}

//output - (In uppercase)
HELLO

Answer 3

Ou si vous voulez continuer à utiliser la version 6.0.0 vous le faites

npm i --save rxjs-compat

pour ajouter la compatibilité inverse

Answer 4

Exécutez ces 2 commandes après avoir exécuté ng update . Cela devrait corriger les importations rxjs :

1. npm i -g rxjs-tslint
2. rxjs-5-to-6-migrate -p src/tsconfig.app.json

Références :

• https://github.com/ReactiveX/rxjs-tslint

Answer 5

Il suffit d'importer les opérateurs suivants

import { Observable } from 'rxjs';
import { map, catchError, timeout } from 'rxjs/operators';