Vous voulez mettre à niveau le projet d'Angular v5 vers Angular v6

114

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

Selon moi, j'ai juste besoin d'exécuter une nouvelle CLI angulaire, puis de déplacer mon ancienne source vers un nouveau projet. J'ai lu que Angular 6 utilise un nouveau moteur de rendu appelé Ivy. Dois-je changer mon projet selon Ivy?

angular migration upgrade angular-ivy Abhishek Chokra
la source
7
update.angular.io
lealceldeiro

Réponses:

272

Mise à niveau d'Angular v6 vers Angular v7

La version 7 d'Angular a été publiée Lien officiel du blog Angular . Visitez le guide officiel de mise à jour angulaire https://update.angular.io pour des informations détaillées. Ces étapes fonctionneront pour les applications angulaires 6 de base utilisant le matériau angulaire.

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

Mise à niveau d'Angular v5 vers Angular v6

La version 6 d'Angular a été publiée Lien du 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 apporter des modifications à votre code pour le rendre utilisable dans la v6, pour ces informations détaillées, visitez le site officiel https://update.angular.io .

Étapes de mise à niveau (largement tirées du guide officiel de mise à jour angulaire pour une application angulaire de base utilisant un matériau angulaire):

  1. Assurez-vous que la version de NodeJS est 8.9+ sinon la mettre à jour.

  2. Mettez à jour Angular cli globalement et localement, et migrez l'ancienne configuration .angular-cli.json vers le nouveau format angular.json en exécutant 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 TypeScript en exécutant ce qui suit:

    ng update @angular/core

  4. Mettez à jour Angular Material vers la dernière version en exécutant ce qui suit:

    ng update @angular/material

  5. RxJS v6 a des changements majeurs par rapport à la v5, la v6 apporte le package de rétrocompatibilité rxjs-compat qui maintiendra le fonctionnement de vos applications, mais vous devez refactoriser le code TypeScript afin qu'il ne dépende pas de rxjs-compat. Pour refactoriser le code TypeScript, exécutez ce qui suit:

    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 du bundle. veuillez consulter ce guide de mise à niveau RxJS pour plus d'informations.

    npm uninstall rxjs-compat

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

Mise à niveau d'Angular v5 vers Angular 6.0.0-rc.5

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

  2. Mettre à jour la version NodeJS vers 8.9+ (ceci 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 alors utilisez npm cache clean

    npm install -g @angular/cli@next

  4. Remplacez les versions des packages angulaires 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 package local Angular cli vers la version suivante et installez les packages mentionnés ci-dessus.

    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 Angular CLI a été modifié par rapport à 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 fichier angular.json .

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

Remarque: - Si vous obtenez l'erreur suivante "Le compilateur angulaire requiert TypeScript> = 2.7.2 et <2.8.0 mais 2.8.3 a été trouvé à la place". exécuter la commande suivante:

npm install [email protected]
Ashish Jain
la source
update.angular.io ne fonctionne pas dans Edge pour le moment. Il se charge bien, mais une fois que vous commencez à l'utiliser un peu, cela provoque une sorte de problème qui empêche la page de répondre et le navigateur vous demande si vous souhaitez récupérer la page.
Devon Holcombe
3
Étape 5 Je reçois bash: rxjs-5-to-6-migrate: command not found. Des pensées?
Kyle Krzeski
quand je cours ng update @angular/coredans mon dossier de projet ionique, j'obtiens une erreurInvalid range: "*"
smk
1
Après toutes les étapes ci-dessus, j'obtenais ce problème stupide: Impossible de trouver le module "@angular-devkit/build-angular"de ... Donc, cela a été corrigé par npm install @angular-devkit/build-angular --save-dev. A part que je devais mettre à jour les bibliothèques qui utilisaient rxjs-compat précédente, comme ng update @ngx-translate/core, ng update @ng-bootstrap/ng-bootstrapparce que peu d'entre eux n'a pas été correctement mis à jour.
Arsen Khachaturyan
2
si vous recevez "Votre version Angular CLI globale (6.0.8) est supérieure à votre version locale (1.6.8). La version Angular CLI locale est utilisée." utilisez npm install @ angular / cli @ latest
Nakres
19

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 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 Par exemple. si vous utilisez des indicateurs comme "app" et "environment" Ceux-ci ont été mis à jour respectivement en "projet" et "configuration".

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

Arjun Shankar
la source
Après l'étape 2, j'ai dû convertir les fichiers .json suivants (tsconfig, angular-cli.json, tslint) en UTF8, sans BOM. J'ai eu une erreur de caractère JSON non valide à cette étape.
Benjamin
16

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

Mise à niveau angulaire

https://update.angular.io/

Valentin Despa
la source
1
cela devrait vraiment être la réponse acceptée car elle répond à toutes les autres questions sur la mise à niveau
theTechRebel
8

Vérifiez les détails de la mise à niveau étape par étape d'Angular 5 vers Angular 6. Ils fournissent des détails sur les problèmes que vous rencontrez lors de la mise à niveau et comment les résoudre.

  • Mettez à jour la version de votre nœud à 8 ou plus et installez la dernière version de Angular cli globalement par npm i -g @ angular / cli @ latest.
  • Angular 6 utilise angular.json comme fichier de configuration au lieu de .anguar-cli.json. Tslint a également été modifié. Consultez https://github.com/angular/angular-cli/wiki/angular-workspace pour les derniers détails de configuration. Vous devez déplacer l'une de vos configurations existantes vers un nouveau fichier de configuration.
  • Pour ce faire, créez un autre projet factice avec le dernier cli en utilisant ng new 'your-project' et les mêmes paramètres par défaut tels que le préfixe, le style, etc. que vous avez utilisés 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 de Angular → Angular 6. Il explique comment les modifier / les 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 mettre à jour npm
  • Maintenant vient la grande partie. Mise à niveau de RxJS et résolution des conflits. RxJS a normalisé les importations d'opérateurs et de créateurs observables avec cette version. Faites npm i -g rxjs-tslint et ajoutez ci-dessous la configuration de lint 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 devez le résoudre manuellement.

Changement de nom des opérateurs:

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

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

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 prêt. Bienvenue dans Angular 6 :) Consultez mon article de blog ici sur la mise à niveau

Uday Vunnam
la source
4

J'ai dû réexécuter ng update @ angular / cli pour que angular-cli.json soit changé en angular.json

Kris Bonev
la source
2

Veuillez exécuter les commentaires ci-dessous pour mettre à jour vers Angular 6 à partir d'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. L'installation globale ne fonctionnera que)
  5. rxjs-5-to-6-migrate -p src / tsconfig.app.json (Après l'installation, nous devons le changer dans notre code source au format rxjs6)
  6. npm désinstaller rxjs-compat (supprimez-le enfin)
user2716958
la source
2

Guide complet

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

1. Mettez à jour la CLI globalement et localement

  1. Utilisation de NPM (assurez-vous que vous disposez de la version 8+ du nœud)

    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

2.Mettre à jour les dépendances

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

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

Normalement, cela signifierait que vous devez mettre à jour votre code partout où les importations et les opérateurs RxJS sont utilisés, mais heureusement, il existe un package qui s'occupe de 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 package.jsonfichier.

package.json capture d'écran des packages de mise à niveau

Puis cours 

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json
bereket gebredingle
la source
Je reçois bash: rxjs-5-to-6-migrate: command not founden essayant d'exécuter la commande rxjs-5 à 6-migrate. Des pensées?
Kyle Krzeski
1
@WilliamHampshire avez-vous exécuté npm install -g rxjs-tslint
Joe
Yup aucune idée de ce que c'est @Joe
Kyle Krzeski
peut-être que vous n'avez pas le dernier tslint?
Joe
1
Savez-vous comment faire cela sans utiliser de cli angulaire? Dans mon projet, je fais tout manuellement
Daniel
1

Comme l'a souligné Vinay Kumar, il ne mettra pas à jour la CLI angulaire installée globalement. 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 modifier le projet existant, vous devez modifier package.json dans votre projet.

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

  npm install --save rxjs-compat

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

Maksim B.
la source
0

exécutez simplement la commande suivante:

ng update

Remarque: cela ne sera pas mis à jour globalement.

Vinay Kumar
la source
0

Voilà comment je le fais fonctionner.

Mon environnement:

Angular CLI Global: 6.0.0, Local: 1.7.4, Angular: 5.2, Typescript 2.5.3

Remarque: pour l'activer, ng Updatevous 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 angular-material 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 CLI angulaire: https://github.com/angular/angular-cli/issues/10621

Ryan Huang
la source