Comment passer d'Angular 4 à Angular 5+ ?

Question

J'ai besoin de mettre à jour mon projet d'Angular 4 à Angular 5+ ,

J'ai besoin de changer toutes les dépendances suivantes pour Angular 5+.

J'ai aussi mis à jour Angular CLI à la version 1.5.0.

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

ng nouveau 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 ?

CLI Config :

Answer 1

Cette solution est pour Visual Studio 2017 en utilisant le modèle angulaire.

Utilisez l'invite de commande Node.js ou Open PowerShell. Naviguez vers le répertoire du projet et utilisez la commande dir pour vérifier si le package.json existe.

Fermez l'instance de Visual Studio et exécutez la commande npm install -g npm-check-updates le résultat suivant devrait apparaître

Ensuite, utilisez la commande ncu -u Le paquet suivant doit être mis à jour vers la dernière version

Si les paquets pointent toujours vers Angular 4, alors supprimez le fichier package-lock.json et suivez à nouveau les étapes décrites ci-dessus.

Webpack est utilisé comme module bundler par Visual Studio. Webpack utilise AotPlugin pour compiler les applications Angular 4, maintenant Webpack n'utilise plus Aotplugin pour Angular 5. Il utilise maintenant AngularCompilerPlugin.So open webpack.config.js et remplacez toutes les occurrences de AotPlugin par AngularCompilerPlugin.

Ouvrez le fichier ClientApp/boot.server.ts et remplacez la ligne de code suivante (ligne n°22).

const zone = moduleRef.injector.get(NgZone);

avec,

const zone: NgZone = moduleRef.injector.get(NgZone);

Lien vers la source

Answer 2

Problème corrigé avec la mise à jour de la version de Node.

J'ai dû mettre à jour la version de Node,

sudo apt-get install nodejs

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli@latest

ng new ProjectName

node --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"
}

Answer 3

Voici la bonne réponse, et c'est très simple.

Suivez le guide officiel de mise à niveau d'Angular.

Vous remplirez un court formulaire en sélectionnant la version d'Angular que vous utilisez et celle vers laquelle vous voulez passer. La liste des étapes à suivre pour effectuer la mise à niveau s'affiche ensuite. Vous devez suivre ce guide pour toutes les mises à niveau. (Veuillez voter pour avant de partir) :)

https://update.angular.io/

Answer 4

Consultez le blog sur Angular

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/

Vous pouvez également mettre à jour votre angular-CLI à 1.5.0 qui va créer un projet angulaire v5. Vous pouvez comparer les différences avec les vôtres.

Answer 5

Si vous souhaitez simplement mettre à niveau votre projet angular4 vers angular 5, procédez comme suit.

1. Allez dans le 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 marché pour moi.

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