Mise à jour vers Angular 5

Question

Comment mettre à jour vers Angulaire 5? C'est à partir de mon colis.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"
}

Quand je lance npm install, j'obtiens cette erreur

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

npm ERR! notarget Pas compatible avec la version trouvée: @angular/common@5.0.0 npm ERR! notarget installation Valide objectifs: mnp ERR! notarget 5.0.0-rc.0, 5.0.0-bêta.7, 5.0.0-bêta.6, 5.0.0-bêta.5, 5.0.0-bêta.4, 5.0.0-bêta.3, 5.0.0-bêta.2, 5.0.0-bêta.1, 5.0.0-bêta.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-bêta.1, 4.3.0-bêta.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-bêta.1, 4.2.0-bêta.0, 4.1.3, 4.1.2, 4.1.1, 4.1.0, 4.1.0-rc.0, 4.1.0-bêta.1, 4.1.0-bêta.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-bêta.8, 4.0.0-bêta.7, 4.0.0-bêta.6, 4.0.0-bêta.5, 4.0.0-bêta.4, 4.0.0-bêta.3, 4.0.0-bêta.2, 4.0.0-bêta.1, 4.0.0-bêta.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-bêta.1, 2. 3.0 bêta.0, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.2.0-rc.0, 2.2.0-bêta.1, 2.2.0-bêta.0, 2.1.2, 2.1.1, 2.1.0, 2.1.0-rc.0, 2.1.0-bêta.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 mnp ERR! notarget Ce n'est probablement pas un problème avec les mnp lui-même. npm ERR! notarget Dans la plupart des cas vous ou l'un de vos dépendances sont requérant mnp ERR! notarget un package version qui n'existe pas. npm ERR! notarget mnp ERR! notarget Il a été spécifié comme une dépendance de "gizza' npm ERR! notarget

Je sais Angulaire 5 est encore en version bêta, mais je veux le tester.

EDIT: la Version 5.0.0 maintenant n'existent que de Nov. 1er 2017

Answer 1

Comme aujourd'hui, angulaire 5 a été publié officiellement le 1er Novemebr 2017, Donc, pour ceux qui veulent mettre à jour votre ancien angulaire applications angulaire 5:

1) L'angle de l'équipe a aussi mis en ligne un outil pratique pour faire la mise à niveau de toute version angulaire 5, aussi simple que possible.

2) Vous devrez mettre à jour l'ensemble de vos angulaire de paquets pour 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 typescript@2.4.2 rxjs@^5.5.2

3) Angulaire 5 maintenant dépend aussi de Tapuscrit 2.4.2 et RxJS 5.5.2, de sorte que vous aurez à les mettre à niveau de paquet ainsi.

npm install typescript@2.4.2 --save-exact 

4) Si vous comptez sur la date, la devise, la virgule, ou pour cent de tuyaux, à 5, vous allez voir des changements mineurs au format. Pour les applications utilisant les paramètres régionaux autres que fr-us, vous aurez besoin de l'importer et éventuellement locale_extended_fr de @angulaire/common/i18n_data/locale_fr et registerLocaleData(local). Pour plus d'informations sur les tuyaux de dernières modifications: https://stackoverflow.com/a/47263949/2810015

5) l'Utilisation d'outils au lieu de s'étend avec tous les événements de cycle de vie : de vous Assurer de ne pas utiliser s'étend OnInit, ou l'utilisation s'étend à tout événement de cycle de vie. Au lieu d'utiliser les outils .

6) Commutateur de HttpModule et le service Http pour HttpClientModule et la HttpClient service. HttpClient simplifie la valeur par défaut de l'ergonomie (Vous n'avez pas besoin de carte pour json plus et supprimer tout map(res => res.json()) des appels, qui ne sont plus nécessaires.) et prend désormais en charge tapé les valeurs de retour et les intercepteurs.

7) La méthode recommandée pour l'importation des opérateurs dans RxJS 5.5 est de rxjs/opérateurs.

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

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

Answer 2

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’un des candidats à la version suggérée, comme 5.0.0-rc.0. Il y a de bonnes chances qu'ils ne soient pas tous aussi exacts, alors lisez l'erreur npm, elle est en fait 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"
}
 

Answer 3

Edit: Voici les dernières dépendances angulaires 5:

   "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

Answer 4

J'ai eu la même erreur, même lors du collage de la commande à partir du Angulaire guide de mise à niveau.

En fin de compte, j'ai juste changé les versions les plus récentes 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 typescript@2.4.2 --save-exact

Je ne suis pas sûr pourquoi cette erreur se produit parce que même quand je tape dans

 npm view @angular/core versions --json

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

Answer 5

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

Rapide vue d'ensemble:

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

 npm install typescript@2.4 --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