web-dev-qa-db-fra.com

Mise à jour sur Angular 5

Comment mettre à jour à Angular 5? Ceci est de mon package.json:

"dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "@types/jwt-decode": "^2.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "jwt-decode": "^2.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "1.4.0-rc.2",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.31",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "sw-precache": "^5.2.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "TypeScript": "~2.3.3"
}

Lorsque j'exécute npm install, j'obtiens cette erreur

npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "installer" npm ERR! node v6.11.2 npm ERR! npm v3.10.10 npm ERR! code ETARGET

npm ERR! notarget Aucune version compatible trouvée: @ angular/common @ 5.0.0 npm ERR! notarget Cibles d'installation valides: npm ERR! notarget 5.0.0-rc.0, 5.0.0-beta.7, 5.0.0-beta.6, 5.0.0-beta.5, 5.0.0-beta.4, 5.0.0-beta.3, 5.0 .0-beta.2, 5.0.0-beta.1, 5.0.0-beta.0, 4.4.4, 4.4.3, 4.4.2, 4.4.1, 4.4.0-RC.0, 4.3.6 , 4.3.5, 4.3.4, 4.3.3, 4.3.2, 4.3.1, 4.3.0, 4.3.0-rc.0, 4.3.0-beta.1, 4.3.0-beta.0, 4.2 .6, 4.2.5, 4.2.4, 4.2.3, 4.2.2, 4.2.1, 4.2.0, 4.2. 0-rc.2, 4.2.0-rc.1, 4.2.0-rc.0, 4.2.0-beta.1, 4.2.0-beta.0, 4.1.3, 4.1.2, 4.1.1, 4.1.0, 4.1.0-rc.0, 4.1.0-beta.1, 4.1.0-beta.0, 4.0.3, 4.0.2, 4.0.1, 4.0.0, 4.0.0, rc. 6, 4.0.0-rc.5, 4.0.0-rc.4, 4.0.0-rc.3, 4.0.0-rc.2, 4.0.0-rc.1, 4.0.0-rc.0, 4.0.0-beta.8, 4.0.0-beta.7, 4.0.0-beta.6, 4.0.0-beta.5, 4.0.0-beta.4, 4.0.0-beta.3, 4.0. 0-beta.2, 4.0.0-beta.1, 4.0.0-beta.0, 2.4.10, 2.4.9, 2.4.8, 2.4.7, 2.4.6, 2.4.5, 2.4.4, 2.4.3, 2.4.2, 2.4.1, 2.4.0, 2.3.1, 2.3.0, 2.3.0-rc.0, 2.3.0-beta.1, 2. 3.0-beta.0, 2.2. 4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.2.0-rc.0, 2.2.0-beta.1, 2.2.0-beta.0, 2.1.2, 2.1.1, 2.1.0, 2.1.0-rc.0, 2.1.0-beta.0, 2.0.2, 2.0.1, 2.0.0, 2.0.0-r c.7, 2.0.0-rc.6, 2.0 .0-rc.5, 2.0.0-rc.4, 2.0.0-rc.3, 2.0.0-rc.2, 2.0.0-rc.1, 2.0.0-rc.0, 0.0.0 -7, 0.0.0-6, 0.0.0-5, 0.0.0-4, 0.0.0-3, 0.0.0-2, 0.0.0-1, 0.0.0-0 npm ERR! notarget npm ERR! notarget Ce n'est probablement pas un problème avec npm lui-même. npm ERR! notarget Dans la plupart des cas, vous ou l'une de vos dépendances demandez npm ERR! notarget une version de package qui n'existe pas. npm ERR! notarget npm ERR! notarget Il a été spécifié en tant que dépendance de 'gizza' npm ERR! pas de cible

Je sais que Angular5 est toujours en version bêta mais je veux le tester.

EDIT: La version 5.0.0 existe maintenant à partir du 1er novembre 2017

javascriptnode.jsangularnpmangular5
40
Melchia

EDIT: La version 5.0.0 existe maintenant à partir du 1er novembre 2017

NPM vous dit que la version 5.0.0 n'existe pas. remplacez votre package.json par l’une des versions suggérées, telle que 5.0.0-rc.0. Il y a de bonnes chances qu'ils ne soient pas tous exactement cela non plus, alors lisez l'erreur npm, elle est réellement utile dans ce cas.

"dependencies": {
    "@angular/animations": "5.0.0-rc.0",
    "@angular/common": "5.0.0-rc.0",
    "@angular/compiler": "5.0.0-rc.0",
    "@angular/core": "5.0.0-rc.0",
    "@angular/forms": "5.0.0-rc.0",
    "@angular/http": "5.0.0-rc.0",
    "@angular/platform-browser": "5.0.0-rc.0",
    "@angular/platform-browser-dynamic": "5.0.0-rc.0",
    "@angular/router": "5.0.0-rc.0",
    "@types/jwt-decode": "^2.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "jwt-decode": "^2.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "1.4.0-rc.2",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.31",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "sw-precache": "^5.2.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "TypeScript": "~2.3.3"
}
15
rjustin

Comme maintenant, angular 5 a été publié officiellement le 1er novembre 2017, donc pour ceux qui veulent mettre à jour vos anciennes angular applications en angular 5:

1) L’équipe Angular a également mis un outil pratique pour rendre la mise à niveau d’une version quelconque à la version angular 5, aussi simple que possible.

2) Vous devrez mettre à jour tous vos paquets angular vers la version 5.0, exécutez la commande suivante:

npm install @angular/animations@^5.0.0 @angular/common@^5.0.0 @angular/compiler@^5.0.0 @angular/compiler-cli@^5.0.0 @angular/core@^5.0.0 @angular/forms@^5.0.0 @angular/http@^5.0.0 @angular/platform-browser@^5.0.0 @angular/platform-browser-dynamic@^5.0.0 @angular/platform-server@^5.0.0 @angular/router@^5.0.0 zone.js@^0.8.4 @angular/upgrade@^5.0.0 [email protected] rxjs@^5.5.2

3) Angular 5 dépend également de TypeScript 2.4.2 et de RxJS 5.5.2, vous devez donc également mettre à jour ces paquetages.

npm install [email protected] --save-exact

4) Si vous vous fiez à la date, à la devise, au nombre décimal ou au pourcentage de 5, vous verrez des modifications mineures dans le format. Pour les applications utilisant des paramètres régionaux autres que en-us, vous devez l'importer et éventuellement le paramètre local_extended_fr de @ angular/common/i18n_data/locale_fr et registerLocaleData (local). Pour plus d'informations sur les modifications de rupture de tuyaux: https://stackoverflow.com/a/47263949/2810015

5) Utilisation d'outils implémentés au lieu d'étend avec des événements de cycle de vie: Assurez-vous de ne pas utiliser d'étend OnInit ou d'utiliser des extensions avec n'importe quel événement de cycle de vie. Utilisez plutôt des outils.

6) Basculez de HttpModule et du service Http vers HttpClientModule et le service HttpClient. HttpClient simplifie l'ergonomie par défaut (vous n'avez plus besoin de mapper vers json et de supprimer les appels map(res => res.json()) qui ne sont plus nécessaires.) Et prend désormais en charge les valeurs de retour et les intercepteurs saisis.

7) La méthode recommandée pour importer des opérateurs dans RxJS 5.5 consiste à utiliser rxjs/opérateurs.

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

J'ai essayé d'expliquer davantage ici . https://onlyforcoder.blogspot.fr 2017/17 /angular-5-upgrade-your-project-To-Angular5.html

55
Nimish goel

Edit: Ceci est la dernière Angular 5 dépendances de travail:

  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.7",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "TypeScript": "~2.5.3"
  }

Il suffit de copier coller et lancer l’installation de npm

12
Melchia

J'ai eu la même erreur même en collant la commande du Guide de mise à niveau angulaire .

En fin de compte, je viens de changer les versions à la dernière et cela a fonctionné.

npm install @angular/animations@latest @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest rxjs@latest --save

npm install [email protected] --save-exact

Je ne sais pas pourquoi cette erreur se produit car même lorsque je tape

 npm view @angular/core versions --json

Je peux voir que la version existe réellement. Ma seule théorie est peut-être que c'est parce que je suis sur Windows et que la version Windows de NPM n'aime pas ces numéros de version ...

3
Diskdrive

Réponse originale de @Vishal Gulati: https://stackoverflow.com/a/47132265/687718

Rapide vue d'ensemble:

Mettez à niveau Angular avec tous ses packages vers la dernière version.

npm install [email protected] --save-dev
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest --save

Mettre à niveau le CLI si nécessaire

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

Voici la commande pour mettre à jour Angular CLI dans la version 5.2.0

npm install @ angular/compiler-cli @ 5.2.0

2
Sheo Dayal Singh

Ce problème est dû à la version de npm Pour pouvoir fonctionner dans Angular 5;

"node": ">=6.9.5 <7.0.0",
"npm": ">=3.10.7 <4.0.0",
"yarn": ">=1.0.2 <2.0.0"
1
Dr. X

Avant de mettre à jour, renommez vos balises de template en ng-template.

Mettez à jour toutes vos dépendances avec la dernière Angular et la bonne version de TypeScript. Si vous utilisez Windows, vous pouvez utiliser:

npm install @ angular/animations @ '^ 5.0.0' @ angular/common @ '^ 5.0.0' @ angular/compiler @ '^ 5.0.0' @ angular/compiler-cli @ '^ 5.0.0' @angular /core@'^5.0.0 '@ angular/forms @' ^ 5.0.0 ', @ angular/http @' ^ 5.0.0 ', @ angular/platform-browser @' ^ 5.0.0 ', @ angular/platform-browser -dynamic@'^5.0.0 '@ @ angular/platform-server @' ^ 5.0.0 '@ angular/router @' ^ 5.0.0 '[email protected] rxjs@'^5.5.2'

npm install [email protected] --save-exact

1
Lijo

En gros, il y a peu d’étapes importantes pour y parvenir.

  1. Mettez à niveau Angular CLI vers la dernière version.
  2. Modifiez Angular 4 dépendances de l'application et mettez à jour les dépendances.

Ainsi, vous pouvez facilement mettre à niveau votre application Angular 4 à Angular 5, en savoir plus

1
Mohit Tanwani