Comment mettre à jour la version angular dans un projet angular-cli?

Je tente de mettre à niveau mon projet angular 2 de 2.0.0 à 2.4.1. Je crois comprendre que la gestion des versions sémantiques a été adoptée depuis la version 2.0.0 et les versions 2.xx devraient être des remplaçants. Mon expérience semble indiquer le contraire. Peut-être que je ne sais tout simplement pas ce que je fais mais je n’ai pas trouvé cela simple …

Tentative 1 – Mise à niveau manuelle de la version

Ma première approche naïve consistait à mettre à jour manuellement mes dépendances @angulars. Vous pouvez référencer mon package.json ci-dessous (mise à jour 1). J’ai apporté ces modifications, puis j’ai effectué une npm install et j’ai reçu plusieurs avertissements, puis j’ai obtenu l’erreur suivante lorsque j’ai essayé de créer un ng serve .

Impossible de lire la propriété ‘AssetUrl’ de 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 [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN @angular/[email protected] requires a peer of rxjs@^5.0.1 but none was installed. npm WARN @angular/[email protected] requires a peer of zone.js@^0.7.2 but none was installed. npm WARN @angular/[email protected] requires a peer of rxjs@^5.0.1 but none was installed. npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. npm WARN @ngtools/[email protected] requires a peer of @angular/comstackr-cli@^2.3.1 but none was installed. npm WARN @ngtools/[email protected] requires a peer of @angular/tsc-wrapped@^0.5.0 but none was installed. npm WARN @ngtools/[email protected] requires a peer of webpack@^2.1.0-beta.25 but none was installed. 

J’ai donc essayé de corriger ces avertissements mais je ne sais pas comment les corriger (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 la mise à jour de ma version angular 2 …

Package.json original

 { "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/comstackr": "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/jasminee": "^2.2.30", "@types/lodash": "^4.14.39", "angular-cli": "1.0.0-beta.16", "codelyzer": "~0.0.26", "jasminee-core": "2.4.1", "jasminee-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasminee": "^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/comstackr": "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/jasminee": "^2.2.30", "@types/lodash": "^4.14.39", "angular-cli": "1.0.0-beta.16", "codelyzer": "~0.0.26", "jasminee-core": "2.4.1", "jasminee-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasminee": "^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 – Utilisez npm-check-updates

Depuis que j’ai essayé de choisir mes dépendances angulars pour les mises à jour, je me suis retrouvé dans une canvas 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 

Cela s’est bien passé mais quand j’ai essayé de servir, j’ai l’erreur suivante:

ERREUR dans AppModule n’est pas un NgModule

En utilisant les informations recueillies ici , j’ai déclassé ma version typescripte, cette erreur a disparu, mais une nouvelle erreur est apparue.

ERROR in Erreur lors de la résolution statique des valeurs de symbole. Référence à une fonction non exscope (position 29:10 dans le fichier .ts d’origine), résolution des symboles 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 contre ces erreurs, mais le fait que j’ai tant de problèmes soulève des drapeaux rouges.

Quelqu’un peut-il aider? Est-ce que je prends la mauvaise approche?

Notez que j’ai vu quelques suggestions concernant la mise à jour des projets angular-cli qui recommandent de désinstaller angular-cli et de le réinstaller, puis de procéder à une init ng et de remplacer vos fichiers de configuration. Cela n’a pas fonctionné pour moi car j’avais déjà la dernière version.

Edit: La déclaration concernant la dernière valeur angular-cli était incorrecte. J’ai eu la version 1.0.0-beta.16 de la version angular-cli, alors que la version la plus récente au moment de cette édition est la version 1.0.0-beta.24. Néanmoins, j’ai essayé de mettre à jour mon angular-cli et de lancer ng init sur mon projet existant. Je remarque maintenant que je n’ai pas suivi exactement les étapes décrites sur la page de github angi-cli. J’ai sauté le npm install –save-dev angular-cli @ latest, et j’ai supprimé tous mes node_modules au lieu d’utiliser la commande rm qu’ils décrivaient.

UTILE:

Utilisez le Guide de mise à jour angular officiel sélectionnez votre version actuelle et la version que vous souhaitez mettre à niveau pour le guide de mise à niveau correspondant. https://update.angular.io/

Voir Diffusion angular CLI du référentiel GitHub pour comparer les modifications de la CLI angular. https://github.com/cexbrayat/angular-cli-diff/

Mis à jour le 08/05/2018:

CLI angular 1.7 introduit la ng update .

ng mise à jour

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

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

1.7 à 6 mise à jour

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

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

MISE À JOUR 30/04/2017:

1.0 mise à jour

Vous devriez maintenant suivre le guide de migration de la CLI angular


MISE À JOUR 04/03/2017:

Mise à jour RC

Vous devez suivre le guide de migration Angular CLI RC


MISE À JOUR 20/02/2017:

S’il vous plaît être conscient que 1.0.0-beta.32 a des changements de rupture et a supprimé la ng init and ng update

La demande d’extraction indique les éléments suivants:

BREAKING CHANGE: Suppression des commandes de mise à jour init & ng de ng car leur implémentation actuelle pose plus de problèmes qu’elle n’en résout. La fonctionnalité de mise à jour reviendra à la CLI, jusqu’à ce que des mises à jour manuelles des applications soient nécessaires.

L’angular-cli CHANGELOG.md indique ce qui suit:

BREAKING CHANGES – @ angular / cli: Suppression des commandes de mise à jour ng init & ng car leur implémentation actuelle pose plus de problèmes qu’elle n’en résout. Une fois que RC est sorti, nous n’aurons plus besoin de les utiliser pour mettre à jour, car l’étape sera aussi simple que d’installer la dernière version de la CLI.


MISE À JOUR 17/02/2017:

Angular-cli a été ajouté au package 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 

Package de projet local:

 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 

RÉPONSE ORIGINALE

Vous devez suivre les étapes du fichier README.md sur GitHub pour mettre à jour l’angle par le biais de l’ angle angular .

Les voici:

Mise à jour de l’angular

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

Paquet global:

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

Package de projet local:

 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 

L’exécution de ng init vérifie les modifications apscopes à tous les fichiers générés automatiquement par ng new et vous permet de les mettre à jour. Il vous est proposé quatre choix pour chaque fichier modifié: y (écraser), n (ne pas écraser), d (afficher les différences entre votre fichier et le fichier mis à jour) et h (aide).

Lisez attentivement les différences pour chaque fichier de code et acceptez les modifications ou incorporez-les manuellement après la fin de ng init.

La réponse de JJB m’a mis sur la bonne voie, mais la mise à niveau ne s’est pas très bien déroulée. Mon processus est détaillé ci-dessous. J’espère que le processus sera plus facile à l’avenir et que la réponse de JJB peut être utilisée ou quelque chose de plus simple.

Détails de la solution

J’ai suivi les étapes décrites dans la réponse de JJB pour mettre à jour précisément la courbe angular. Cependant, après l’exécution de npm install angular-cli était interrompue. Même essayer de faire la ng version produirait une erreur. Donc, je ne pouvais pas faire la commande ng init . Voir l’erreur ci-dessous:

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

Pour pouvoir utiliser n’importe quelle commande angular-cli, je devais mettre à jour mon fichier package.json et transférer les dépendances @angular vers la version 2.4.1, puis effectuer une autre npm install .

Après cela, j’ai pu ng init . J’ai mis à jour mes fichiers de configuration, mais aucun de mes fichiers app / *. Lorsque cela a été fait, je recevais encore des erreurs. Le premier est détaillé ci-dessous, le second était le même type d’erreur mais dans un fichier différent.

ERROR in Erreur lors de la résolution statique des valeurs de symbole. Les appels de fonction ne sont pas pris en charge. Envisagez de remplacer la fonction ou lambda par une référence à une fonction exscope (position 62: 9 dans le fichier .ts d’origine), en résolvant le symbole AppModule dans C: / _ git / my-project / 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’avais utilisé une fonction exscope et apporté les modifications suivantes 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 comprends être les détails les plus importants, les modifications suivantes ont été nécessaires:

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

  2. La mise à jour manuelle de la version @angular, 2.0.0 ne semble pas être supscope par la version 1.0.0-beta.24 de angular-cli.

  3. Avec l’aide de angular-cli et de la commande ng init , j’ai mis à jour mes fichiers de configuration. Je pense que les changements critiques concernaient angular-cli.json et package.json. Voir les modifications du fichier de configuration en bas.

  4. Apportez des modifications de code aux fonctions d’exportation avant de les référencer, comme indiqué dans les détails de la solution.

Changements de configuration clés

changements angi-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 considère les versions utilisées par ng-init. Notez que ma version angular n’est pas la 2.4.1, mais la modification que j’ai apscope était l’inheritance des composants introduit dans la version 2.3, donc je me sentais bien avec ces versions. 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/comstackr": "^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/comstackr-cli": "^2.3.1", "@types/jasminee": "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", "jasminee-core": "2.5.2", "jasminee-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasminee": "^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" } } 

Selon la documentation sur http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html, vous devriez simplement être capable de courir …

npm install @ angular / {commun, compilateur, compilateur-cli, core, formulaires, http, navigateur de plate-forme, navigateur-plateforme dynamic, serveur-plateforme, routeur, animations} @latest typescript @ derniers -save

Je l’ai essayé et j’ai eu quelques erreurs à cause de mes anciennes bibliothèques de zones.js et ngrx / store.

En les mettant à jour vers les dernières versions npm install zone.js@latest --save et npm install @ngrx/store@latest -save , alors l’exécution de l’installation angular a encore fonctionné pour moi.

Utilisez simplement la fonctionnalité intégrée de la CLI angular

 ng update 

mettre à jour vers la dernière version.

Retirer :

 npm uninstall -g angular-cli 

Réinstaller (avec du 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 méthode consiste à ne pas utiliser l’installation globale et à append le dossier /node_modules/.bin dans PATH ou à utiliser des scripts npm. Il sera plus doux de mettre à jour.

Pour mettre à jour Angular CLI vers une nouvelle version, vous devez mettre à jour le package global et le package local de votre projet.

Paquet global:

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

Package de projet local:

 rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell npm install --save-dev @angular/cli@latest npm install 

Voir la référence https://github.com/angular/angular-cli