114 votes

Vous voulez mettre à jour votre projet d'Angular v5 à Angular v6.

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

D'après moi, je dois simplement lancer un nouveau CLI Angular et ensuite déplacer mes anciennes sources vers le nouveau projet. J'ai lu qu'Angular 6 utilise un nouveau moteur de rendu appelé Ivy. Devrai-je modifier mon projet en fonction d'Ivy ?

270voto

Ashish Jain Points 2807

Mise à niveau d'Angular v6 vers Angular v7

Version 7 d'Angular a été publié Lien vers le blog officiel d'Angular . Visitez le guide officiel de mise à jour d'angular https://update.angular.io pour des informations détaillées. Ces étapes fonctionneront pour les applications Angular 6 de base utilisant Angular Material.

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

Mise à niveau d'Angular v5 vers Angular v6

Version 6 d'Angular a été publié Lien vers le blog officiel d'Angular . J'ai mentionné les étapes générales de la mise à jour ci-dessous, mais avant et après la mise à jour, vous devez apporter des modifications à votre code pour qu'il puisse fonctionner dans la v6. Pour obtenir des informations détaillées, visitez le site officiel. https://update.angular.io .

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

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

  2. Mettre à jour Angular cli globalement et localement, et migrer l'ancienne configuration .angular-cli.json au nouveau angular.json en exécutant la commande suivante :

    npm install -g @angular/cli  
    npm install @angular/cli  
    ng update @angular/cli
  3. Mettez à jour tous les paquets du framework Angular à la v6, ainsi que la version correcte de RxJS et TypeScript en exécutant ce qui suit :

    ng update @angular/core
  4. Mettez à jour Angular Material à 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 un paquet de compatibilité ascendante rxjs-compat qui permettra à vos applications de continuer à fonctionner, mais vous devez remanier le code TypeScript afin qu'il ne dépende pas de rxjs-compat. Pour remanier 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- car il augmente la taille du bundle. veuillez voir ceci Guide de mise à niveau de RxJS pour plus d'informations.

    npm uninstall rxjs-compat
  6. Exécution terminée ng serve pour le vérifier.
    Si vous obtenez des erreurs dans la construction, référez-vous https://update.angular.io pour des informations détaillées.

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

  1. Mettez à jour rxjs vers 6.0.0-beta.0, veuillez voir ceci Guide de mise à niveau de RxJS pour plus d'informations. La version 6 de RxJS a subi des modifications importantes, c'est pourquoi vous devez d'abord rendre votre code compatible avec la dernière version de RxJS.

  2. Mettre à jour la version de NodeJS à 8.9+ (ceci est requis par la version 6 d'angular cli)

  3. Mise à jour du paquet global d'Angular cli à 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. Changez les versions des paquets angulaires dans le fichier package.json en ^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. Ensuite, mettez à jour le paquet local d'Angular cli à la version suivante et installez les paquets 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 d'Angular CLI a été modifié à partir de la version angular cli 6.0.0-rc.2, et votre configuration existante peut être mise à jour automatiquement en exécutant la commande suivante. Elle supprimera l'ancien fichier de configuration .angular-cli.json et rédigera de nouvelles angular.json fichier.

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

Note :- Si vous obtenez l'erreur suivante "Le compilateur Angular requiert TypeScript >=2.7.2 et <2.8.0 mais 2.8.3 a été trouvé à la place", exécutez la commande suivante :

npm install typescript@2.7.2

19voto

Arjun Shankar Points 221

Angular 6 vient d'être publié.

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 install 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 drapeaux comme "app" et "environment". Ceux-ci ont été mis à jour en "project" et "configuration" respectivement.

Voir https://update.angular.io/ pour un guide plus détaillé.

15voto

Valentin Despa Points 3540

Il suffit d'utiliser le guide officiel de mise à niveau qui vous indiquera ce que vous devez faire en fonction de vos besoins particuliers :

Upgrade angular

https://update.angular.io/

8voto

Uday Vunnam Points 171

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

4voto

Kris Bonev Points 320

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X