Comment gérer les imports d'Observable (RXJS) avec Angular 6 (et versions plus récentes)
La version 6 du framework Angular a apporté d'importantes modifications à la gestion de la librairie RxJS, une des librairies composant le framework. Les imports n'utilisent plus la même syntaxe et certaines fonctions ont changé de nom. Vous devez donc modifier votre code. Si vous ne pouvez ou ne voulez pas, il existe également des solutions pour assurer la compatibilité sans modifier votre code.
La librairie RxJS a subi d'importantes modifications lors de son passage à la version 5.5. C'est cette version qui est fournie avec la version 6 du framework Angular. À partir de cette version, les imports sont structurés différemment. Auparavant, pour utiliser un opérateur, il fallait utiliser la direction "import" suivie du chemin vers l'opérateur.
import 'rxjs/add/operator/map';
À partir de la version 5.5, l'écriture de l'import suit la même structure qu'un import classique d'Angular. On utilise toujours la directive "import", mais on indique le nom de l'opérateur entre accolades et on ajoute le mot-clé "from" avec comme librairie "rxjs/operators".
import { map } from 'rxjs/operators';
Certains opérateurs de RxJS ont également changé de nom afin d'éviter des conflits avec des mots-clés réservés dans le langage JavaScript.
- "throw" est devenu "throwError";
- "catchError" remplace "catch".
Vous devez également utiliser les opérateurs différemment. Pour les enchaîner, vous devez utiliser la fonction "pipe()" alors qu'auparavant il fallait les lier à un observable.
Il est également possible de rendre votre code compatible avec la version 6 du framework sans le modifier. Les développeurs de RxJS ont mis en ligne la librairie "rxjs-compat", qui permet à un code compatible avec la version 5 de RxJS de fonctionner également avec les versions supérieures de la librairie. Ce paquet peut s'installer avec le gestionnaire de paquets NPM.
npm i --save rxjs-compat
Il existe également un outil de conversion automatique du code de la version 5 de RxJS vers la version 6. Il est fourni avec le paquet "rxjs-tslint". Il s'agit de la commande "rxjs-5-to-6-migrate". Avec l'argument "-p", vous pouvez préciser le fichier à convertir.
npm i -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json