Récemment, j’ai lancé le didacticiel Angular 2 à l’adresse https://angular.io/docs/ts/latest/tutorial/ .
et laissé avec Angular 2 beta 8 . Maintenant, j'ai repris le tutoriel et la dernière version bêta est la version 14.
Si je fais simplement npm update, quelques modules (préchargés avec le tutoriel) sont mis à jour mais pas Angular2 (je peux le voir avec npm ls).
Si je fais npm update angular 2 ou npm update [email protected], cela ne fait rien non plus.
La commande npm update -D && npm update -S
mettra à jour tous les packages contenus dans package.json
vers leur dernière version, en fonction de leur plage de versions définie. Vous pouvez en lire plus à ce sujet ici .
Si vous souhaitez mettre à jour Angular à partir d'une version antérieure à 2.0.0-rc.1
, vous devez éditer manuellement package.json
, car Angular a été scindé en plusieurs modules npm. Sans cela, comme angular2 package pointe sur 2.0.0-beta.21
, vous ne pourrez jamais utiliser la dernière version de Angular .
Vous trouverez une liste des modules les plus courants dont vous aurez besoin pour commencer dans le répertoire quickstart repository .
Remarques:
Un moyen intéressant de rester à jour avec la dernière version de vos paquets consiste à utiliser npm outdated
qui vous montre tous les paquets obsolètes avec la version recherchée et la dernière.
La raison pour laquelle nous devons chaîner deux commandes, npm update -D
et npm update -S
, est de surmonter ce bogue jusqu'à ce qu'il soit corrigé.
Un autre paquetage de Nice que j’ai utilisé pour migrer une version bêta d’Angular2 vers Angular2 2.0.0 final
est npm-check-updates
Il affiche la dernière version disponible de tous les packages spécifiés dans votre package.json. Contrairement à npm outdated
, il est également capable d’éditer votre package.json, ce qui vous permet d’effectuer un npm upgrade
plus tard.
Installer
Sudo npm install -g npm-check-updates
Utilisation
ncu
pour l'affichage
ncu -u
pour réécrire votre package.json
Mise à niveau vers la dernière version angulaire 5
Paquets Dep angulaires: npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save
Autres paquets installés par la cli angulaire npm install --save core-js@latest rxjs@latest zone.js@latest
Forfaits de développement angulaire: npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest
Types de packages Dev: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest
Autres paquetages installés en tant que dev dev par le cli angulaire: npm install --save-dev codelyzer@latest jasmine-core@latest jasmine-spec-reporter@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-coverage-istanbul-reporter@latest karma-jasmine@latest karma-jasmine-html-reporter@latest protractor@latest ts-node@latest tslint@latest
Installez la dernière version prise en charge utilisée par la clé angulaire (ne faites pas @latest): npm install --save-dev [email protected]
Renommez le fichier angular-cli.json en .angular-cli.json et mettez à jour le contenu:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "project3-example"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
METTRE À JOUR:
À partir de CLI v6 vous pouvez simplement exécuter ng update
afin de mettre à jour automatiquement vos dépendances vers une nouvelle version.
Avec
ng update
parfois vous voudrez peut-être ajouter--force
flag . Si vous le faites, assurez-vous que la version de TypeScript que vous avez obtenue est installé de cette manière est pris en charge par votre version angulaire actuelle, sinon, vous devrez peut-être rétrograder la version de TypeScript.
Consultez également ce guide Mise à jour de vos projets Angular
Si vous êtes sur que vous êtes sur Mac/Linux
ou que vous exécutez bash sur Windows
(qui ne fonctionnera pas avec Windows CMD
par défaut), vous pouvez exécuter ce programme:
npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5 --save
yarn add @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5
Spécifiez simplement la version que vous ne voulez pas, par exemple @ 4.4.5 ou mettez @latest pour obtenir la dernière
Vérifiez votre
package.json
juste pour assurez-vous de mettre à jour tous les packages@angular/*
sur lesquels votre application s'appuie
@angular
dans votre projet, exécutez:npm ls @angular/compiler
ou yarn list @angular/compiler
@angular
disponible sur npm, exécutez:npm show @angular/compiler version
La page officielle npm suggère une méthode structurée pour mettre à jour la version angulaire pour les scénarios globaux et locaux.
Tout d’abord, vous devez désinstaller l’angle actuel de votre système.
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g @angular/cli
2.Nettoyer le cache
npm cache clean
MODIFIER
Comme l'a souligné @candidj
npm cache clean
est renommé en npm cache verify
à partir de npm 5
3.Installer globalement
npm install -g @angular/cli@latest
4. Configuration du projet local si vous en avez un
rm -rf node_modules
npm install --save-dev @angular/cli@latest
npm install
Veuillez vérifier la même chose sur le lien ci-dessous:
https://www.npmjs.com/package/@angular/cli#updating-angular-cli
Cela résoudra le problème.
Si vous souhaitez installer/mettre à niveau tous les packages vers la dernière version et que vous utilisez Windows, vous pouvez l’utiliser dans powershell.exe
:
foreach($package in @("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
npm install @angular/$package@latest -E
}
Si vous utilisez également la cli
, vous pouvez procéder comme suit:
foreach($package in @('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli')){
iex "npm install @angular/$package@latest -E $(If($('cli','compiler-cli').Contains($package)){'-D'})";
}
Cela enregistrera les packages exact (-E) et les packages cli dans devDependencies
(-D)
Approche alternative utilisant npm-upgrade :
npm i -g npm-upgrade
Allez dans votre dossier de projet
npm-upgrade check
Il vous demandera si vous souhaitez mettre à jour le paquet, sélectionnez Oui
C'est simple
Sélectionnez la version que vous utilisez et cela vous donnera un guide étape par étape.
Je recommande de choisir «Avancé» pour voir toutes les étapes. La complexité est un concept relatif - et je ne sais pas à qui est cette idée stupide, mais si vous sélectionnez "Basique", toutes les étapes nécessaires ne seront pas affichées et vous risquez de rater un élément important que votre application "basique" utilise .
Depuis la version 6, il existe une nouvelle commande CLI angulaire ng update
qui analyse intelligemment vos dépendances et effectue des contrôles pour vous assurer que vous mettez à jour les éléments corrects :-)
Les étapes expliquent comment l'utiliser :-)
npm désinstaller --save-dev angular-cli
npm install --save-dev @ angular/cli @ last
ng update @ angular/cli
ng update @ angular/core --force
ng update @ angular/material ou npm i @ angular/cdk @ 6 @ angulaire/materiel @ 6save
npm install TypeScript @ '> = 2.7.0 <2.8.0'
La meilleure façon de le faire est d'utiliser l'extension (pflannery.vscode-versionlens) dans vscode.
ceci vérifie tout et vérifie le meilleur ajustement.
j'ai eu beaucoup de problèmes avec la mise à jour et le maintien de mon application, je laisse la lentille verbeuse faire la vérification et ensuite je cours
npm i
installer les nouvelles dépendances suggérées.
Si vous cherchez comme moi juste pour mettre à jour votre projet au plus tard, voici ce qui fonctionne depuis angular 6:
Ouvrez la console sur votre dossier de projet:
If you type: ng update
et vous obtiendrez le message ci-dessous:
We analyzed your package.json, there are some packages to update:
Name Version Command to update
--------------------------------------------------------------------------------
@angular/cli 7.0.7 -> 7.2.2 ng update @angular/cli
@angular/core 7.0.4 -> 7.2.1 ng update @angular/core
There might be additional packages that are outdated.
Run "ng update --all" to try to update all at the same time.
Donc, je vais habituellement droit et fais:
ng update --all
Enfin, vous pouvez vérifier votre nouvelle version:
ng version
Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.12.2
@angular-devkit/build-angular 0.12.2
@angular-devkit/build-optimizer 0.12.2
@angular-devkit/build-webpack 0.12.2
@angular-devkit/core 7.2.2
@angular-devkit/schematics 7.2.2
@angular/cli 7.2.2
@ngtools/webpack 7.2.2
@schematics/angular 7.2.2
@schematics/update 0.12.2
rxjs 6.3.3
TypeScript 3.2.4
webpack 4.28.4