Comment mettre à jour un projet Angular CLI ?

Question

J'essaie de mettre à jour mon projet angulaire 2 à partir de 2.0.0 à 2.4.1 . Je comprends que le versionnage sémantique a été adopté depuis le 2.0.0 libération et 2.x.x devraient être des remplacements immédiats. Mon expérience semble indiquer le contraire. Peut-être que je ne sais pas ce que je fais, mais je n'ai pas trouvé cela très simple...

Tentative 1 - Mise à niveau manuelle de la version

Ma première approche naïve a été de mettre à jour manuellement ma @angular dépendances. Vous pouvez référencer mon package.json ci-dessous (mise à jour 1). J'ai fait ces changements, puis j'ai fait un npm install et j'ai reçu plusieurs avertissements puis j'ai obtenu l'erreur suivante lorsque j'ai essayé de faire un ng serve .

Impossible de lire la propriété 'AssetUrl' d'undefined.

Et mes avertissements...

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @angular/core@2.4.1 requires a peer of rxjs@^5.0.1 but none was installed.
npm WARN @angular/core@2.4.1 requires a peer of zone.js@^0.7.2 but none was installed.
npm WARN @angular/http@2.4.1 requires a peer of rxjs@^5.0.1 but none was installed.
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/compiler@2.0.2 but none was installed.
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/platform-server@2.0.2 but none was installed.
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/core@2.0.2 but none was installed.
npm WARN @ngtools/webpack@1.2.1 requires a peer of @angular/compiler-cli@^2.3.1 but none was installed.
npm WARN @ngtools/webpack@1.2.1 requires a peer of @angular/tsc-wrapped@^0.5.0 but none was installed.
npm WARN @ngtools/webpack@1.2.1 requires a peer of webpack@^2.1.0-beta.25 but none was installed.

Je suis donc descendu dans le terrier du lapin pour essayer de corriger ces avertissements mais je ne sais pas comment les corriger tous (par exemple @ngtools/webpack) et certains d'entre eux semblent être en conflit les uns avec les autres. J'ai donc abandonné l'approche manuelle de mise à jour de ma version d'angular 2...

Paquet original.json

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "build": "ng build",
    "buildProd": "ng build --env=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/material": "^2.0.0-alpha.9-experimental-pizza",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@types/google-libphonenumber": "^7.4.8",
    "angular2-datatable": "^0.4.2",
    "apollo-client": "^0.4.22",
    "core-js": "^2.4.1",
    "google-libphonenumber": "^2.0.4",
    "graphql-tag": "^0.1.15",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.1.16",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.30",
    "@types/lodash": "^4.14.39",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2",
    "typings": "1.4.0"
  }
}

Mise à jour 1 de package.json

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "build": "ng build",
    "buildProd": "ng build --env=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/material": "^2.0.0-alpha.9-experimental-pizza",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/router": "3.0.0",
    "@types/google-libphonenumber": "^7.4.8",
    "angular2-datatable": "^0.4.2",
    "apollo-client": "^0.4.22",
    "core-js": "^2.4.1",
    "google-libphonenumber": "^2.0.4",
    "graphql-tag": "^0.1.15",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.1.16",
    "rxjs": "5.0.1",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.30",
    "@types/lodash": "^4.14.39",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2",
    "typings": "1.4.0"
  }
}

Tentative 2 - Utiliser npm-check-updates

Puisque lorsque j'ai essayé de sélectionner mes dépendances angulaires pour les mises à jour, je me suis retrouvé dans une toile d'araignée d'autres dépendances qui devaient être mises à jour, j'ai ensuite essayé de tout mettre à jour.

Sur la base de cette réponse J'ai essayé ce qui suit :

npm i -g npm-check-updates
npm-check-updates -u
npm install

Tout s'est bien passé mais quand j'ai essayé de servir ng, j'ai eu l'erreur suivante :

ERROR dans AppModule n'est pas un NgModule

Utilisation des informations recueillies ici J'ai mis à jour ma version de TypeScript, cette erreur a disparu, mais une nouvelle erreur est apparue.

ERROR dans Erreur rencontrée lors de la résolution statique des valeurs de symboles. Référence à une fonction non exportée (position 29:10 dans le fichier original .ts original), résolution du symbole restPaths dans rest-paths.ts, résolution du symbole AppModule dans app.module.ts, résolution du symbole AppModule dans app.module.ts.

Je me suis battu pour résoudre ces erreurs, mais le fait que j'aie autant de mal à les résoudre me fait tirer la sonnette d'alarme.

Quelqu'un peut-il m'aider ? Est-ce que j'adopte la mauvaise approche ?

Notez que j'ai vu certaines suggestions sur la mise à jour des projets angular-cli qui recommandent de désinstaller angular-cli et de le réinstaller, puis de faire un ng init et d'écraser vos fichiers de configuration. Cela n'a pas fonctionné pour moi car j'avais déjà la dernière version.

Edit : La déclaration sur le fait d'avoir la dernière version d'angular-cli était incorrecte. J'avais angular-cli version 1.0.0-beta.16 alors que le dernier en date au moment de cette édition est le suivant 1.0.0-beta.24 . Néanmoins, j'ai essayé de mettre à jour mon angular-cli et d'exécuter ng init sur mon projet existant. Je remarque maintenant que je n'ai pas suivi précisément les étapes décrites sur la page github d'angular-cli. J'ai sauté l'étape npm install --save-dev angular-cli@latest et j'ai fait sauter tous mes node_modules au lieu d'utiliser la commande rm qu'ils proposent.

Answer 1

UTILE :

Utilisez le formulaire officiel Guide de mise à jour d'Angular sélectionnez votre version actuelle et la version vers laquelle vous souhaitez effectuer une mise à niveau pour obtenir le guide de mise à niveau correspondant. https://update.angular.io/

Voir le dépôt GitHub Angular CLI diff pour comparer les modifications apportées à Angular CLI. https://github.com/cexbrayat/angular-cli-diff/

MIS À JOUR LE 26/12/2018 :

Utilisez le formulaire officiel Guide de mise à jour d'Angular mentionnés dans la section utile ci-dessus. Il fournit les informations les plus récentes et des liens vers d'autres ressources qui peuvent être utiles pendant la mise à niveau.

MIS À JOUR LE 08/05/2018 :

Introduction d'Angular CLI 1.7 ng update .

ng actualisation

Une nouvelle commande CLI Angular pour simplifier la mise à jour de vos projets avec les dernières versions. Les paquets peuvent définir la logique qui sera appliquée à vos projets afin de garantir l'utilisation des dernières fonctionnalités et d'apporter des modifications afin de réduire ou d'éliminer l'impact lié aux changements de rupture.

Les informations de configuration pour la mise à jour de ng peuvent être trouvées ici

Mise à jour de 1,7 à 6

CLI 1.7 ne supporte pas une mise à jour automatique v6. Installez manuellement @angular/cli via votre gestionnaire de paquets, puis exécutez le schéma de migration des mises à jour pour terminer le processus.

npm install @angular/cli@^6.0.0
ng update @angular/cli --migrate-only --from=1

---

MIS À JOUR LE 30/04/2017 :

1.0 Mise à jour

Vous devriez maintenant suivre le Guide de migration vers Angular CLI

---

MIS À JOUR LE 04/03/2017 :

Mise à jour RC

Vous devez suivre les Guide de migration d'Angular CLI RC

---

MIS À JOUR LE 20/02/2017 :

Veuillez noter que la version 1.0.0-beta.32 comporte des modifications de rupture et a supprimé les éléments suivants ng init and ng update

La demande de retrait ici déclare ce qui suit :

LA RUPTURE DU CHANGEMENT : Suppression des commandes ng init & ng update car leur implémentation actuelle cause plus de problèmes qu'elle n'en résout. La fonctionnalité de mise à jour reviendra dans le CLI, en attendant les mises à jour manuelles des applications devront être faites manuellement.

L'angular-cli CHANGELOG.md déclare ce qui suit :

LES MODIFICATIONS DE RUPTURE - @angular/cli : Suppression des commandes ng init & ng update car leur implémentation actuelle cause plus de problèmes qu'elle n'en résout. Une fois que RC sera publiée, nous n'aurons plus besoin de les utiliser pour mettre à jour car l'étape l'étape sera aussi simple que l'installation de la dernière version du CLI.

---

MIS À JOUR LE 17/02/2017 :

Angular-cli a été ajouté au paquet NPM @angular. Vous devriez maintenant remplacer la commande ci-dessus par la suivante -

Paquet global :

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

Ensemble de projets locaux :

rm -rf node_modules dist # On Windows use rmdir /s /q node_modules dist
npm install --save-dev @angular/cli@latest
npm install
ng init

---

PREMIÈRE RÉPONSE

Vous devez suivre les étapes de la README.md sur GitHub pour la mise à jour d'angular par le biais de l'outil angular-cli .

Les voici :

Mise à jour d'angular-cli

Pour mettre à jour angular-cli vers une nouvelle version, vous devez mettre à jour à la fois le paquet global et le paquet local de votre projet.

Paquet global :

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest

Ensemble de projets locaux :

rm -rf node_modules dist tmp # On Windows use rmdir /s /q node_modules dist tmp
npm install --save-dev angular-cli@latest
npm install
ng init

Running ng init vérifiera les changements dans tous les fichiers générés automatiquement par ng new et vous permettra de mettre à jour les vôtres. Quatre choix vous sont proposés pour chaque fichier modifié : y (écraser), n (ne pas écraser), d (afficher la différence entre votre fichier et le fichier mis à jour) et h (aide).

Lisez attentivement les diffs pour chaque fichier de code, et acceptez les changements ou incorporez-les manuellement après la fin de ng init.

Answer 2

La réponse de JJB m'a mis sur la bonne voie, mais la mise à niveau ne s'est pas faite sans heurts. Mon processus est détaillé ci-dessous. J'espère que le processus deviendra plus facile à l'avenir et que la réponse de JJB pourra être utilisée ou quelque chose d'encore plus simple.

Détails de la solution

J'ai suivi les étapes décrites dans la réponse de JJB pour mettre à jour l'angular-cli précisément. Cependant, après avoir exécuté npm install angular-cli était cassé. Même en essayant de faire ng version produirait une erreur. Je ne pouvais donc pas faire le ng init commandement. Voir l'erreur ci-dessous :

$ ng init
core_1.Version is not a constructor
TypeError: core_1.Version is not a constructor
    at Object.<anonymous> (C:\_git\my-project\code\src\main\frontend\node_modules\@angular\compiler-cli\src\version.js:18:19)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    ...

Pour pouvoir utiliser les commandes d'angular-cli, j'ai dû mettre à jour mon fichier package.json à la main et faire passer les dépendances @angular à la version 2.4.1, puis faire un nouveau npm install .

Après cela, j'ai pu faire ng init . J'ai mis à jour mes fichiers de configuration, mais aucun de mes fichiers app/*. Lorsque cela a été fait, je recevais toujours des erreurs. La première est détaillée ci-dessous, la seconde était le même type d'erreur mais dans un fichier différent.

ERROR dans Erreur rencontrée lors de la résolution statique des valeurs de symboles. Les appels de fonction ne sont pas pris en charge. Envisagez de remplacer la fonction ou lambda avec une référence à une fonction exportée (position 62:9 dans le fichier fichier .ts original), en résolvant le symbole AppModule dans C:/_git/mon-projet/code/src/main/frontend/src/app/app.module.ts

Cette erreur est liée au fournisseur d'usine suivant dans mon AppModule

{ provide: Http, useFactory: 
    (backend: XHRBackend, options: RequestOptions, router: Router, navigationService: NavigationService, errorService: ErrorService) => {
    return new HttpRerouteProvider(backend, options, router, navigationService, errorService);  
  }, deps: [XHRBackend, RequestOptions, Router, NavigationService, ErrorService]
}

Pour résoudre cette erreur, j'ai utilisé une fonction exportée et apporté la modification suivante au fournisseur.

    { 
      provide: Http, 
      useFactory: httpFactory, 
      deps: [XHRBackend, RequestOptions, Router, NavigationService, ErrorService]
    }

... // elsewhere in AppModule

export function httpFactory(backend: XHRBackend, 
                            options: RequestOptions, 
                            router: Router, 
                            navigationService: NavigationService, 
                            errorService: ErrorService) {
  return new HttpRerouteProvider(backend, options, router, navigationService, errorService);
}

Résumé

Pour résumer ce que je crois être les détails les plus importants, les changements suivants ont été nécessaires :

1. Mettez à jour la version d'angular-cli en suivant les étapes détaillées dans la réponse de JJB (et sur leur page github).

2. En mettant à jour la version @angular à la main, 2.0.0 ne semble pas être supporté par angular-cli version 1.0.0-beta.24

3. Avec l'aide d'angular-cli et de l'application ng init j'ai mis à jour mes fichiers de configuration. Je pense que les changements critiques étaient dans angular-cli.json et package.json. Voir les modifications des fichiers de configuration en bas de page.

4. Apporter des modifications au code des fonctions d'exportation avant que je ne les référence, comme indiqué dans les détails de la solution.

Principaux changements de configuration

modifications de angular-cli.json

{
  "project": {
    "version": "1.0.0-beta.16",
    "name": "frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
...

changé en...

{
  "project": {
    "version": "1.0.0-beta.24",
    "name": "frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
...

Mon package.json ressemble à ceci après une fusion manuelle qui prend en compte les versions utilisées par ng-init. Notez que ma version d'Angular n'est pas la 2.4.1, mais le changement que je recherchais était l'héritage des composants, qui a été introduit dans la 2.3, donc ces versions me convenaient. Le package.json original est dans la question.

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "build": "ng build",
    "buildProd": "ng build --env=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "@angular/material": "^2.0.0-beta.1",
    "@types/google-libphonenumber": "^7.4.8",
    "angular2-datatable": "^0.4.2",
    "apollo-client": "^0.4.22",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2",
    "google-libphonenumber": "^2.0.4",
    "graphql-tag": "^0.1.15",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.1.16"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/lodash": "^4.14.39",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3",
    "typings": "1.4.0"
  }
}

Answer 3

Il suffit d'utiliser la fonction intégrée au CLI d'Angular.

ng update

pour mettre à jour la dernière version.

Answer 4

Selon la documentation disponible ici http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html vous "devriez" être capable de courir...

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

J'ai essayé et j'ai obtenu quelques erreurs dues au fait que mes bibliothèques zone.js et ngrx/store sont d'anciennes versions.

Mise à jour de ces derniers vers les dernières versions npm install zone.js@latest --save et npm install @ngrx/store@latest -save puis relancer l'installation d'Angular a fonctionné pour moi.

Answer 5

Retirer :

npm uninstall -g angular-cli

Réinstallation (avec fil)

# npm install --global yarn
yarn global add @angular/cli@latest
ng set --global packageManager=yarn  # This will help ng-cli to use yarn

Réinstaller (avec npm)

npm install --global @angular/cli@latest

Une autre façon est de ne pas utiliser l'installation globale, et d'ajouter /node_modules/.bin dans le PATH, ou utiliser des scripts npm. La mise à jour sera plus douce.