web-dev-qa-db-fra.com

Changements dans package.json pour Angular 2 à 4 migrations

Actuellement, l'application est sur Angular 2.0.0. Quels sont les packages ou dépendances à modifier pour des raisons de compatibilité avec Angular 4? 

"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@angular/router": "4.0.0",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "4.0.0",
"angular2-toaster": "2.0.0",
"rxjs": "^5.0.1",
"TypeScript": "^2.1.5",
"zone.js": "^0.8.4"
}

Existe-t-il d'autres packages/dépendances à modifier? 

Dois-je modifier le fichier tsconfig.json?

{


 "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "es5",
      "es2015",
      "es2017",
      "dom",
      "scripthost"
    ],
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": true,
    "allowNonTsExtensions" : true
  },
  "exclude": [
    "node_modules",
    "typings/main.d.ts",
    "typings/main"
  ],
  "filesGlob": [
    "./src/**/*.ts",
    "./test/**/*.ts",
    "!./node_modules/**/*.ts",
    "src/custom_typings.d.ts",
    "typings/browser.d.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "resolveGlobs": true,
    "forkChecker": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}
angularjsangularangular4
5
user3344978

Voici une belle vidéo youtube qui explique comment faire pour Migrer Angular 2 à Angular 4

Permettez-moi de résumer ce qui est dit dans la vidéo. La migration de Angular 2 à Angular 4 est un processus en trois étapes.

  1. Supprimez votre ancien dossier "node_modules" car il contient des références à Angular 2.X. 

  2. Changez toutes les versions de @Angular de 2.X à 4.X et effectuez une "installation npm".

  3. Vous pouvez avoir des problèmes avec les pairs indiquant que cette version n'est pas compatible avec cette version. Corrigez-le, l'erreur vous indique. Regardez la vidéo sur la manière de corriger les problèmes rencontrés par les pairs.

  4. Exécutez le projet et effectuez un test approfondi.

 enter image description here

1
Shivprasad Koirala

J'utilise normalement les fichiers ici à titre indicatif: https://github.com/angular/quickstart

Il fournit l'ensemble des fichiers de base de base nécessaires à une application. Il est normalement mis à jour avec Angular puisqu'il fait partie des Angular docs du fichier angular.io.

1
DeborahK

Il existe une application en ligne qui vous guide dans le processus (facile) de mise à niveau de 2 à 4: https://angular-update-guide.firebaseapp.com/

1
mariogl

Vous n'avez pas besoin de modifier manuellement le fichier package.json. Vous pouvez exécuter cette commande si vous utilisez Windows. 

npm cache clean

npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save

CA aidera

Après avoir commenté 

vous devriez mettre à jour votre TypeScript et vous pouvez aussi essayer de le changer dans tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es2016", "dom"] //or es6 instead of es2016(es7)
    }
}
0
Rahul Singh

Dans ces situations, ma solution consiste à utiliser angular-cli pour créer un nouveau projet dans la version angulaire que je souhaite (presque toujours la version la plus récente pour moi), puis à ajouter les autres dépendances dont j'ai besoin, permettant ainsi au gestionnaire de paquets de trier ce que version que je devrais avoir, ou affirmer mon opinion à ce sujet à travers les options de commande du gestionnaire de paquets 

Cela me permet de créer rapidement une bibliothèque de fournisseurs et de vérifier rapidement qu'elle se chargera sans erreur en utilisant "l'application fonctionne!" projet que cli fournit.

Une fois ce processus terminé, vous devriez avoir un fichier package.json que vous pouvez simplement couper et coller les sections de dépendance dans votre projet.

Encore une chose à regarder si vous ne l'avez pas encore ... Fil. Yarn est un nouveau gestionnaire de paquets de nos amis de Facebook. Il est plus récent et donc moins testé que npm, mais il possède quelques fonctionnalités vraiment jolies et, du moins dans ma configuration, tourne environ 20 fois plus vite que npm. Un autre commentateur a mentionné le shrinkwrap, qui est un excellent outil. J'ai donc pensé indiquer une autre solution à cet égard. 

0
IndyWill

Vous ne devriez pas avoir besoin de modifier ts.config. Les modifications que vous avez apportées à package.json semblent être correctes. 

Couple de points:

  • Je pense que "TypeScript" devrait être dans "devDependencies" car vous n'en aurez pas besoin en mode prod.
  • Je recommande de supprimer "^" de toutes vos dépendances b.c. il vaut mieux verrouiller la version exacte
  • Je recommande également fortement d'utiliser "shrinkwrap" pour éviter les dépendances lâches au sein de vos dépendances. 

Pour installer Angular dernière version, supprimez/déplacez votre dossier node_modules actuel. Ensuite:

npm cache clean
npm install

Pour référence, voir la section 'Mise à jour vers la version 4.0.0' http://angularjs.blogspot.com/2017/03/angular-400-now-available.html

0
bakerhumadi