Vérifiez les détails de la mise à niveau étape par étape d'Angular 5 à Angular 6. Vous y trouverez des informations sur les problèmes rencontrés lors de la mise à niveau et sur la manière de les résoudre.
-
Mettez à jour votre version de node à 8 ou plus et installez Angular cli latest globalement par npm i -g @angular/cli@latest.
-
Angular 6 utilise angular.json comme fichier de configuration au lieu de .anguar-cli.json. Aussi tslint a été modifié. Consultez https://github.com/angular/angular-cli/wiki/angular-workspace pour derniers détails de configuration. Vous devez déplacer toutes vos dans le nouveau fichier de configuration.
-
Pour ce faire, créez un autre projet factice avec le dernier cli en utilisant le nouveau ng 'votre-projet' et les mêmes comme le préfixe, le style etc. que vous avez utilisé précédemment pour votre projet. Créer un nouveau projet avec cli https://github.com/angular/angular-cli/wiki/new
-
Utilisez https://update.angular.io/ pour vérifier ce qui a été modifié par rapport à votre version actuelle d'Angular → Angular 6. Il fournit une utilisation de la façon de les modifier/corriger.
-
Suivez les étapes ci-dessus et copiez/mettez à jour le fichier angular.json créé à l'étape 2. Faites npm i dans votre projet pour obtenir toutes les dépendances et faites npm update
-
Maintenant vient la grande partie. RxJS et la résolution des conflits. RxJS a standardisé les importations de et des créateurs d'Observable avec cette version. Faites npm i -g rxjs-tslint et ajoutez la configuration de lint ci-dessous dans tslint.json
{
"rulesDirectory": [
"node_modules/rxjs-tslint"
],
"rules": {
"rxjs-collapse-imports": true,
"rxjs-pipeable-operators-only": true,
"rxjs-no-static-observable-methods": true,
"rxjs-proper-imports": true
}
}
-
Maintenant, exécutez ng lint --fix. Cela corrige quelques éléments mais la plupart des problèmes restants seront mis en évidence et vous devrez les corriger manuellement.
Changement de nom des opérateurs :
do -> tap,
catch -> catchError,
switch -> switchAll,
finally -> finalize
Tous les opérateurs sont déplacés vers rxjs/operators
import { map, filter, reduce } from 'rxjs/operators';
Les méthodes de création d'observables sont déplacées vers rxjs
import { Observable, Subject, of, from } from 'rxjs';
Vous êtes prêt. Bienvenue à Angular 6 :) Consultez mon article de blog ici sur la façon de mettre à niveau