web-dev-qa-db-fra.com

Comment mettre à niveau le projet CLI Angular?

Je tente de mettre à niveau mon projet angular 2 de 2.0.0 à 2.4.1. Je comprends que les versions sémantiques ont été adoptées depuis les versions 2.0.0 et 2.x.x doivent être des remplacements instantanés. Mon expérience semble indiquer le contraire. Peut-être que je ne sais pas ce que je fais mais je n'ai pas trouvé que c'était simple ...

Tentative 1 - Mise à niveau de la version manuelle

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

Impossible de lire la propriété 'AssetUrl' de non définie

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/compiler-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 résoudre ces avertissements, mais je ne sais pas comment les résoudre 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 consistant à mettre à jour ma version angular 2 ...

Package.json d'origine 

{
  "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 - Utilisez npm-check-updates

Depuis que j'ai essayé de choisir mes dépendances angular pour les mises à jour, je me suis retrouvé dans une toile d'araignée contenant d'autres dépendances qui devaient être mises à jour, j'ai ensuite essayé de tout mettre à jour.

Basé sur 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 lorsque 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 rétrogradé ma version de TypeScript, 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 exportée (position 29:10 dans le fichier .ts d'origine), résolvant le symbole restPaths dans rest-paths.ts, résolvant le symbole AppModule dans app.module.ts, résolvant le symbole AppModule dans app.module.ts

Je me suis frayé un chemin à travers ces erreurs, mais le fait que j’ai tant de mal à lever les drapeaux rouges.

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

Notez que j'ai déjà vu quelques suggestions sur la mise à jour de projets angular-cli qui recommandent de désinstaller et de réinstaller angular-cli, puis de lancer un 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: L'information sur le dernier angular-cli était incorrecte. J'avais angular-cli version 1.0.0-beta.16 alors que le plus tard au moment de cette modification est 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 les étapes décrites sur la page angular-clithithmith avec précision. J'ai sauté le npm install --save-dev angular-cli@latest et j'ai vidé tous mes nœuds_modules au lieu d'utiliser la commande rm qu'ils décrivent.

angularangular-cli
64
The Gilbert Arenas Dagger

UTILE:

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

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

MISE À JOUR DU 26/12/2018:

Utilisez le document officiel Guide de mise à jour angulaire mentionné dans la section utile ci-dessus. Il fournit les informations les plus récentes avec des liens vers d'autres ressources pouvant s'avérer utiles lors de la mise à niveau.

Mis à jour le 08/05/2018:

CLI 1.7 angulaire introduit ng update.

ng update

Une nouvelle commande CLI Angular pour simplifier la mise à jour de vos projets avec les versions les plus récentes. Les packages peuvent définir une 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 les conséquences liées à une rupture des modifications.

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

1.7 à 6 mise à jour

CLI 1.7 ne prend pas en charge la mise à jour automatique de la v6. Installez manuellement @ angular/cli via votre gestionnaire de paquets, 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 devez maintenant suivre le Guide de migration du CLI angulaire

ACTUALISÉ le 03/04/2017:

Mise à jour RC

Vous devez suivre le Guide de migration du CLI RC angulaire

ACTUALISÉ le 20/02/2017:

Veuillez noter que la version 1.0.0-beta.32 contient des modifications importantes et a supprimé ng init and ng update.

La demande d'extraction ici indique ce qui suit:

RUPTURE DE CHANGEMENT: Suppression des commandes ng init & ng update car leur implémentation actuelle provoque plus de problèmes qu'elle n'en résout. La fonctionnalité de mise à jour reviendra à la CLI, en attendant les mises à jour manuelles des applications.

Le paramètre angular-cli CHANGELOG.md indique ce qui suit:

RUPTURE DE MODIFICATIONS - @ angular/cli: suppression des commandes de mise à jour ng car leur implémentation actuelle pose plus de problèmes qu'elle n'en résout. Une fois que RC sera disponible, nous n’aurons plus besoin de les utiliser pour effectuer la mise à jour car cette étape sera aussi simple que l’installation de la dernière version de la CLI.

MISE À JOUR DU 17/02/2017:

Angular-cli a maintenant été ajouté au paquetage 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 de README.md sur GitHub pour mettre à jour angular via le angular-cli .

Les voici:

Mise à jour de angular-cli

Pour mettre à jour angular-cli vers une nouvelle version, vous devez mettre à jour 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

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

Lancer 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. Vous avez le choix entre quatre choix 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 de chaque fichier de code et acceptez les modifications ou incorporez-les manuellement une fois que ng init est terminé.

80
J J B

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. Espérons que le processus deviendra plus facile à l'avenir et que la réponse de JJB puisse ê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 précisément le angular-cli. Cependant, après avoir exécuté npm install, angular-cli était cassé. Même essayer de faire ng version produirait une erreur. Donc, je ne pouvais pas faire la commande ng init. Voir 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 n’importe quelle commande angular-cli, j’ai dû mettre à jour mon fichier package.json à la main, placer les dépendances @angular sur 2.4.1, puis créer un autre 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/*. Quand cela a été fait, je continuais à avoir des erreurs. Le premier est détaillé ci-dessous, le second était du 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 exportée (position 62: 9 dans le fichier .ts original), en résolvant le symbole AppModule dans C:/_ git/my-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'avais 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);
}

Sommaire

Pour résumer ce que je considère être les détails les plus importants, les modifications suivantes étaient 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 sa page github).

  2. Mise à jour à la main de la version @angular, la version 2.0.0 ne semble pas être prise en charge par angular-cli version 1.0.0-beta.24

  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 de clé

changements 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 prenant en compte les versions utilisées par ng-init. Notez que ma version angular n'est pas la version 2.4.1, mais le changement que j'ai été après était l'héritage de composant qui a été introduit dans la version 2.3, donc tout allait bien pour ces versions. Le package.json d'origine 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"
  }
}
4
The Gilbert Arenas Dagger

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

ng update

mettre à jour à la dernière version.

3
Nicolas Henneaux

Selon la documentation disponible ici http://angularjs.blogspot.co.uk 2017/03/angular-400-now-available.html vous 'devriez' être en mesure de fonctionner ...

npm install @ angular/{commun, compilateur, compilateur-cli, noyau, formulaires, http, navigateur de plate-forme, navigateur de plate-forme, serveur de plate-forme, routeur, animations} @latest TypeScript @ latest --save

Je l'ai essayé et j'ai quelques erreurs en raison de la présence d'anciennes versions de mes bibliothèques zone.js et ngrx/store.

Les mettre à jour avec les dernières versions npm install zone.js@latest --save et npm install @ngrx/store@latest -save, puis exécuter à nouveau le angular installation ont fonctionné pour moi.

1
Matt Sugden

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 solution consiste à ne pas utiliser l'installation globale et à ajouter le dossier /node_modules/.bin dans PATH ou à utiliser des scripts npm. Il sera plus doux de mettre à jour.

0
Nicolas Zozol

Solution qui a fonctionné pour moi:

  • Supprimer le dossier node_modules et le dossier dist
  • (en cmd) >> ng update --all --force
  • (en cmd) >> npm install TypeScript @ "> = 3.4.0 et <3.5.0" --save-dev --save-exact
  • (en cmd) >> npm install --save core-js
  • Commentaires importation 'core-js/es7/reflect'; dans polyfill.ts
  • (en cmd) >> ng servir
0
Naveen Kumar V