web-dev-qa-db-fra.com

Veut mettre à jour le projet de Angular v5 à Angular v6

Comme Angular 6 est ici, je souhaite mettre à niveau ou déplacer mon application client angular 5 vers angular 6, mais je ne reçois aucun tutoriel ni quoi que ce soit qui peut me guider à travers.

Selon moi, il me suffit de lancer une nouvelle CLI Angular, puis de déplacer mon ancienne source vers un nouveau projet. J'ai lu le Angular 6 utilise un nouveau moteur de rendu appelé Ivy. Devrai-je changer de projet en fonction de Ivy?

angularmigrationupgradeivy
113
Abhishek Chokra

Mise à niveau de Angular v6 vers Angular v7

La version 7 de Angular a été publiée lien de blog officiel Angular . Consultez le guide officiel de mise à jour angular https://update.angular.io pour obtenir des informations détaillées. Ces étapes fonctionneront pour les applications angular de base 6 utilisant le matériel Angular.

ng update @angular/cli 
ng update @angular/core
ng update @angular/material

Mise à niveau de Angular v5 vers Angular v6

La version 6 de Angular a été publiée lien de blog officiel Angular . J'ai mentionné les étapes générales de mise à niveau ci-dessous, mais avant et après la mise à jour, vous devez modifier votre code pour le rendre utilisable dans la v6. Pour obtenir des informations détaillées, visitez le site Web officiel https://update.angular.io .

Étapes de mise à niveau (en grande partie tirées du officiel Guide de mise à jour angulaire pour une application de base Angular utilisant du matériel Angular):

  1. Assurez-vous que la version de NodeJS est la version 8.9+ si vous ne la mettez pas à jour.

  2. Mettez à jour Angular cli globalement et localement et faites migrer l'ancienne configuration . Angular-cli.json vers la nouvelle angular.json en lançant ce qui suit:

    npm install -g @angular/cli  
npm install @angular/cli  
ng update @angular/cli

  3. Mettez à jour tous vos packages de framework Angular vers la v6 et la version correcte de RxJS et de TypeScript en exécutant ce qui suit:

    ng update @angular/core

  4. Mettez à jour Angular Material avec la dernière version en lançant:

    ng update @angular/material

  5. RxJS v6 comporte des modifications majeures par rapport à la v5, la v6 apportant une compatibilité ascendante avec le paquetage rxjs-compat qui gardera vos applications en état de fonctionner, mais vous devez refactoriser le code TypeScript pour qu’il ne dépende pas de rxjs-compat. Pour refactoriser le code TypeScript, exécutez la commande suivante:

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

    Remarque: Une fois que toutes vos dépendances ont été mises à jour vers RxJS 6, supprimez rxjs-compat car il augmente la taille de l'ensemble. veuillez consulter ceci Guide de mise à niveau RxJS pour plus d'informations.

    npm uninstall rxjs-compat

  6. Terminé, exécutez ng serve pour le vérifier.
    Si vous rencontrez des erreurs dans la construction, reportez-vous à https://update.angular.io pour obtenir des informations détaillées.

Mise à niveau de Angular v5 vers Angular 6.0.0-rc.5

  1. Mettez à niveau rxjs vers la version 6.0.0-beta.0, veuillez consulter ceci Guide de mise à niveau RxJS pour plus d'informations. RxJS v6 a des changements radicaux, donc commencez par rendre votre code compatible avec la dernière version de RxJS.

  2. Mettez à jour la version de NodeJS vers la version 8.9+ (cela est requis par la version angular cli 6)

  3. Mettez à jour le package global Angular cli vers la prochaine version.

    npm uninstall -g @angular/cli
npm cache verify

    si la version de npm est <5, utilisez npm cache clean

    npm install -g @angular/cli@next

  4. Remplacez les versions des packages angular dans le fichier package.json par ^6.0.0-rc.5

    "dependencies": {
  "@angular/animations": "^6.0.0-rc.5",
  "@angular/cdk": "^6.0.0-rc.12",
  "@angular/common": "^6.0.0-rc.5",
  "@angular/compiler": "^6.0.0-rc.5",
  "@angular/core": "^6.0.0-rc.5",
  "@angular/forms": "^6.0.0-rc.5",
  "@angular/http": "^6.0.0-rc.5",
  "@angular/material": "^6.0.0-rc.12",
  "@angular/platform-browser": "^6.0.0-rc.5",
  "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
  "@angular/router": "^6.0.0-rc.5",
  "core-js": "^2.5.5",
  "karma-jasmine": "^1.1.1",
  "rxjs": "^6.0.0-uncanny-rc.7",
  "rxjs-compat": "^6.0.0-uncanny-rc.7",
  "zone.js": "^0.8.26"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.5.0",
  "@angular/cli": "^6.0.0-rc.5",
  "@angular/compiler-cli": "^6.0.0-rc.5",
  "@types/jasmine": "2.5.38",
  "@types/node": "~8.9.4",
  "codelyzer": "~4.1.0",
  "jasmine-core": "~2.5.2",
  "jasmine-spec-reporter": "~3.2.0",
  "karma": "~1.4.1",
  "karma-chrome-launcher": "~2.0.0",
  "karma-cli": "~1.0.1",
  "karma-coverage-istanbul-reporter": "^0.2.0",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "postcss-loader": "^2.1.4",
  "protractor": "~5.1.0",
  "ts-node": "~5.0.0",
  "tslint": "~5.9.1",
  "TypeScript": "^2.7.2"
}

  5. Prochaine mise à jour du paquet local Angular cli vers la prochaine version et installation des paquetages susmentionnés.

    rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows 
Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@next
npm install

  6. Le format de configuration de la CLI Angular a été remplacé par la version angular cli 6.0.0-rc.2 et votre configuration existante peut être mise à jour automatiquement en exécutant la commande suivante. Il supprimera l'ancien fichier de configuration . Angular-cli.json et écrira un nouveau angular.json fichier.

    ng update @angular/cli --migrate-only --from=1.7.4

Remarque: - Si vous obtenez l'erreur suivante "Le compilateur Angular nécessite TypeScript> = 2.7.2 et <2.8.0 mais 2.8.3 a été trouvé à la place". lancer la commande suivante:

npm install [email protected]
270
Ashish Jain

Angular 6 vient de sortir.

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Voici ce qui a fonctionné pour l'un de mes plus petits projets

  1. npm install -g @ angular/cli
  2. npm install @ angular/cli
  3. ng update @ angular/cli --migrate-only --from = 1.7.0
  4. ng update @ angular/core
  5. npm installer rxjs-compat
  6. ng servir

Vous devrez peut-être mettre à jour vos scripts d'exécution dans package.json. Si vous utilisez des indicateurs tels que "app" et "environment", ils ont été mis à jour pour "projet" et "configuration" respectivement.

Reportez-vous à https://update.angular.io/ pour obtenir un guide plus détaillé.

19
Arjun Shankar

Utilisez simplement le guide de mise à niveau officiel qui vous indiquera ce que vous devez faire pour vos propres besoins:

Upgrade angular

https://update.angular.io/

15
Valentin Despa

Vérifiez les détails étape par étape de la mise à niveau de Angular 5 à Angular 6. Ces informations fournissent des informations détaillées sur les problèmes que vous rencontrez lors de la mise à niveau et sur la façon de les résoudre.

  • Mettez à jour la version de votre noeud à la version 8 ou supérieure 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. De plus, tslint a été changé. Vérifiez https://github.com/angular/angular-cli/wiki/angular-workspace pour les détails de configuration les plus récents. Vous devez déplacer n'importe quelle configuration existante dans un nouveau fichier de configuration.
  • Pour ce faire, créez un autre projet fictif avec la dernière version en utilisant le nouveau ‘votre-projet’ et les mêmes valeurs par défaut, telles que préfixe, style, etc., que vous avez précédemment utilisées 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 les modifications apportées par rapport à votre version actuelle de Angular → Angular 6. Il permet d’utiliser comment les changer/les réparer.
  • Suivez les étapes ci-dessus et copiez/mettez à jour le fichier angular.json créé à l'étape 2. Npm i dans votre projet pour obtenir toutes les dépendances et faire la mise à jour de npm
  • Maintenant vient la grande partie. Mise à niveau de RxJS et résolution des conflits. Avec cette version, RxJS a normalisé les importations d’opérateurs et de créateurs Observable. 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 lancez ng lint --fix. Cela corrige quelques éléments, mais la plupart des problèmes restants seront mis en évidence et vous devrez le résoudre manuellement.

Changement de nom d'opérateur: 

do -> tap, 
catch -> catchError, 
switch -> switchAll, 
finally -> finalize

Tous les opérateurs déplacés vers rxjs/opérateurs 

import { map, filter, reduce } from 'rxjs/operators';

Les méthodes de création observables sont déplacées vers rxjs 

   import { Observable, Subject, of, from } from 'rxjs';

Vous êtes tous ensemble. Bienvenue sur Angular 6:) Consultez mon article de blog ici sur la mise à nivea

8
Uday Vunnam

Je devais ré-exécuter ng update @ angular/cli pour que angular-cli.json soit changé en angular.json

4
Kris Bonev

Guide complet

----------------- Avec angular-cli --------------------------

1. Mettre à jour le CLI globalement et localement

  1. Utilisation de NPM (assurez-vous de disposer du noeud version 8+)

    npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save

  2. Utiliser du fil

    yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

Dépendances 2.Update

ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs

Angular 6 dépend maintenant de TypeScript 2.7 et de RxJS 6

Normalement, cela signifie que vous devez mettre à jour votre code partout où les importations RxJS et les opérateurs sont utilisés, mais heureusement, il existe un package qui prend en charge la plupart des tâches lourdes:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

Ensuite, vous pouvez exécuter rxjs-5-to-6-migrate

rxjs-5-to-6-migrate -p src/tsconfig.app.json

enfin supprimer rxjs-compat

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

Reportez-vous à ce lien https://alligator.io/angular/angular-6/

------------------- Sans angular-cli -------------------------

Vous devez donc mettre à jour manuellement votre fichier package.json.

package.json screenshoot of upgrade packages

Puis courir

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json
2
bereket gebredingle

Veuillez lancer les commentaires ci-dessous pour mettre à jour en Angular 6 à partir de Angular 5

  1. ng update @ angular/cli
  2. ng update @ angular/core
  3. npm install rxjs-compat (afin de prendre en charge l'ancienne version rxjs 5.6)
  4. npm install -g rxjs-tslint (Pour passer du format rxjs 5 au format rxjs 6 dans le code. Installez-le globalement alors seulement fonctionnera)
  5. rxjs-5-to-6-migrate -p src/tsconfig.app.json (Après l'installation, nous devons le modifier dans notre code source au format rxjs6)
  6. npm uninstall rxjs-compat (à retirer définitivement)
2
user2716958

Comme Vinay Kumar a fait remarquer qu'il ne mettra pas à jour l'installation globale installée Angular CLI. Pour le mettre à jour globalement, utilisez simplement les commandes suivantes:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Notez que si vous souhaitez mettre à jour un projet existant, vous devez le modifier, vous devez modifier package.json dans votre projet.

Il n'y a pas de changements décisifs dans Angular lui-même, mais ils sont dans RxJS. N'oubliez donc pas d'utiliser la bibliothèque rxjs-compat pour travailler avec du code hérité.

  npm install --save rxjs-compat  

J'ai écrit un bon article sur l'installation/la mise à jour Angular CLI http://bmnteam.com/angular-cli-installation/

1
Maksim B.

lancez simplement la commande suivante:

ng update

remarque: cela ne se mettra pas à jour globalement.

0
Vinay Kumar

Voici comment je le fais fonctionner.

Mon environnement:

CLI angulaire globale: 6.0.0, locale: 1.7.4, angulaire: 5.2, TypeScript 2.5.3

Remarque: pour activer ng Update, vous devez d'abord installer Angular CLI 6.0 npm install -g @angular/cli or npm install @angular/cli.

  1. ng update //update Angular Package core/common/complier... to 6.0.0

  2. ng update @angular/cli //change angular-cli.json to angular.json

optionnel si vous avez le matériau angulaire 5.4.2, ngx-translate 9.1.1, ng-bootstrap/ng-bootstrap 1.1.1:

  1. ng update @angular/material //upgrade to 6.0.1

  2. npm install @ngx-translate/[email protected] --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/[email protected] //for ng-bootstrap

Si vous utilisez Observable et obtenez l'erreur:

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'.

Changement: import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

À

import { Observable, of } from "rxjs";

Problème de l'interface de ligne de commande angulaire: https://github.com/angular/angular-cli/issues/10621

0
Ryan Huang

Il existe peu d’étapes pour passer de 2/4/5 à Angular 6.

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

Pour résoudre le problème lié à "angular.json": -

ng update @angular/cli --migrate-only --from=1.7.4

Store MIGRATION
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

MIGRATION RXJS
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

En espérant que cela vous aidera :)

0
aditya kumar