web-dev-qa-db-fra.com

Comment mettre à jour/passer de Angular 4 à Angular 5+

Je dois mettre à jour mon projet de Angular 4 à Angular 5+,

Je dois changer toutes les dépendances suivantes en Angular 5+.

J'ai également mis à jour la CLI angulaire vers la version 1.5.0.

J'ai essayé de créer un nouveau projet mais il semble ne créer que le projet Angular 4.

ng new NG5_Project

"dependencies": {
  "@angular/animations": "^4.2.4",
  "@angular/common": "^4.2.4",
  "@angular/compiler": "^4.2.4",
  "@angular/core": "^4.2.4",
  "@angular/forms": "^4.2.4",
  "@angular/http": "^4.2.4",
  "@angular/platform-browser": "^4.2.4",
  "@angular/platform-browser-dynamic": "^4.2.4",
  "@angular/router": "^4.2.4",
  "core-js": "^2.4.1",
  "rxjs": "^5.4.2",
  "zone.js": "^0.8.14"
}

Qu'est-ce que je fais mal.

Configuration CLI:

 CLI Config

angularupdatesangular5
36
Sangwin Gawande

Problème résolu avec la mise à jour de la version du noeud. 

Je devais mettre à jour la version du nœud,

Sudo apt-get install nodejs

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli@latest

ng new ProjectName

noeud --version ==> 8.9.0

ng --version ==> 1.5.0

"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",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
}
16
Sangwin Gawande

Si vous souhaitez simplement améliorer votre projet angular4 en angulaire 5, procédez comme suit.

  1. Accédez au répertoire de votre projet. 
  2. Ouvrez une invite de commande et exécutez les commandes suivantes
  3. npm install -g npm-check-updates
  4. ncu -u

Cela a fonctionné pour moi.

http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/

7
Jerin Kurian

Vérifier le blog angulaire 

https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

Dans l'article, un guide de mise à jour est mentionné. 

Vous pouvez le trouver ici: https://angular-update-guide.firebaseapp.com/

En outre, vous pouvez mettre à jour votre angular-CLI vers 1.5.0, ce qui créera un projet v5 angulaire. Vous pouvez comparer les différences avec les vôtres.

6
Bunyamin Coskuner

Voici la bonne réponse, et c'est super simple. 

Suivez le guide de mise à niveau angulaire officiel. 

Vous allez remplir un court formulaire en sélectionnant la version d’Angular sur laquelle vous souhaitez et la version à mettre à niveau. Il vous montre ensuite la liste des étapes à suivre pour effectuer la mise à niveau. Vous devez suivre ce guide pour toutes les mises à niveau. (Merci de bien vouloir voter avant de partir) :)

https://update.angular.io/

 enter image description here

5
Francisco d'Anconia

(Élaboration) un peu plus, cela m'a aidé à à la fois la mise à niveau globale et la mise à niveau du projet local. 

Les lignes directrices exactes sont (bien sûr) dans https://update.angular.io/ . 

Global: 

$ npm uninstall -g angular-cli (to be sure)
$ npm uninstall -g @angular/cli
$ npm cache clean
$ npm install -g @angular-cli@1
$ ng -v ... this will show you the current CLI version.

Projet local: 

$ cd to/your/project/folder
$ remove the folder node_modules
$ npm install --save-dev @angular/cli@1
$ npm install

Ensuite: 

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

Cela peut être nécessaire (et ne fera pas mal): correctif d'audit $ npm

$ npm install [email protected] --save-exact

La source: 

https://update.angular.io/ vous montrera le meilleur itinéraire. 

La principale différence réside dans le fait que vous utilisez toujours le module "http". Vous pouvez (ou devez) migrer de http vers le module httpclient. Dans la plupart des cas, c'est assez facile. 

0
tjm1706

Pour mettre à jour votre Angular 4 en Angular 5

Ouvrez votre webpack.config.js

Ajoutez le code ci-dessous dans ContextReplacementPlugin 

 /angular(\\|\/)core(\\|\/)(@angular|esm5)/
0
user1349544