web-dev-qa-db-fra.com

Vaut-il la peine de migrer de Angular 2 vers Angular 4?

Bonjour SO communauté et Angulariens!

Donc, je suis en train de développer une énorme plate-forme dans Angular 2. Et j'ai réalisé que de nombreuses bibliothèques et dépendances externes pour Angular 2 migrent vers la nouvelle Angular 4. Me donnant de nombreuses erreurs, évidemment.

Je pourrais bifurquer ces bibliothèques et utiliser les versions fourchues et m'abonner au développement de la bibliothèque principale ou, je pourrais simplement mettre à niveau vers Angular 4 mon projet.

Questions à répondre afin de déterminer si cela vaut la peine pour moi de migrer:

  • Compatibilité avec Angular 2.4

J'ai trouvé quelques adaptations pour assurer la compatibilité avec l'héritage, comme ceci: https://github.com/angular/angular/commit/e99d721

  • Modifie l'ensemble de l'application

Dois-je parcourir toute mon application et commencer à réparer les choses?

Je veux dire, les fonctionnalités principales sont-elles retravaillées de telle manière que je devrai en revoir beaucoup?

Ou, y a-t-il de nombreuses incompatibilités build/core qui me garderont des jours occupés à corriger les erreurs/avertissements de compilation au lieu de développer?

Je ne demande pas à quelqu'un de faire la recherche pour moi , je demande aux gens qui ont peut-être déjà traversé ce processus ou qui connaissent simplement bien les deux versions afin pour me donner quelques conseils d'expérience, des clarifications, etc.

En ce moment, je fais mes recherches ici:

[~ # ~] mise à jour [~ # ~]

Je viens de migrer vers Angular 4 . Le lien que @PierreDuc a mis dans sa réponse est un très bel outil pour avoir une ligne directrice décente dans le processus de migration.

Je recommanderais:

  1. Lisez les nouvelles fonctionnalités et mettez-vous à jour avec Angular 4. Cela a été particulièrement utile: https://angularjs.blogspot.it/2017/03/angular-400-now-available.html
  2. Suivez les directives d'Angular et modifiez votre projet: https://angular-update-guide.firebaseapp.com/

Je recommanderais également de valider votre projet actuel, de créer une nouvelle branche dans votre référentiel de développeurs et de procéder à la migration dans cette branche.

Un problème que j'ai rencontré :
Input, Output et ContentChild seront importés à partir d'un mauvais chemin.

Mon cas:

import { Component, OnInit, OnDestro } from '@angular/core';
import { Input, ContentChild } from "@angular/core/src/metadata/directives";

Solution:

import { Component, OnInit, OnDestroy, Input, ContentChild } from '@angular/core';
angularmigrationangular4
27
SrAxi

Si vous consultez le journal des modifications, vous devez garder à l'esprit quelques éléments:

Avant la mise à jour

  • Assurez-vous de ne pas utiliser étend OnInit, ou utilisez étend avec tout événement de cycle de vie. Utilisez plutôt implements <lifecycle event>.
  • Arrêtez d'utiliser DefaultIterableDiffer, KeyValueDiffers#factories Ou IterableDiffers#factories
  • Cessez d'utiliser les importations en profondeur, ces symboles sont désormais marqués avec ɵ Et ne font pas partie de notre API publique.
  • Arrêtez d'utiliser Renderer.invokeElementMethod Car cette méthode a été supprimée. Il n'y a actuellement pas de remplaçant.

Pendant la mise à jour

  • Mettez à jour toutes vos dépendances vers la version 4 et la dernière TypeScript.
  • Si vous utilisez Linux/Mac, vous pouvez utiliser: npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@4.0.0 TypeScript@latest --save
  • Si vous utilisez des animations dans votre application, vous devez importer BrowserAnimationsModule depuis @angular/platform-browser/animations Dans votre application NgModule.
  • Remplacez RootRenderer par RendererFactory2.
  • Remplacez Renderer par Renderer2.

Après la mise à jour

  • Renommez vos balises template en ng-template.
  • Remplacez OpaqueTokens par InjectionTokens.
  • Si vous appelez DifferFactory.create(...) supprimez l'argument ChangeDetectorRef.
  • Remplacez ngOutletContext par ngTemplateOutletContext.
  • Remplacez CollectionChangeRecord par IterableChangeRecord

source

25
PierreDuc

Voici une belle vidéo de 12 minutes qui montre comment migrer de angular 2 à angular 4 . Dit et fait il y a 3 étapes de base à suivre: -

1) Supprimez l'ancien dossier node_modules pour éviter toute référence à 2.X

2) changez tous @angular en 4.0.0 dans votre package.json et effectuez une installation NPM. Si possible, veuillez vider le cache.

3) Il y a de fortes chances que vous obteniez une incompatibilité de version entre pairs lors de l'installation de NPM. corrige le. La vidéo ci-dessus explique comment corriger l'inadéquation entre pairs.

Comme indiqué dans les réponses ci-dessus, vous devez implémenter des interfaces pour les événements, etc. Pour une raison quelconque, je n'ai rencontré aucun problème et les événements ont fonctionné comme précédemment dans Angular 2.

enter image description here

2
Shivprasad Koirala

L'équipe angulaire a annoncé, n'appelons pas angular 2 ou angular 4 appelons-le Angular et il y aura une mise à jour majeure) pour tous les 6 mois. J'ai rencontré le problème dans angular v4.0.0 donc changez la configuration dans webpack

  new webpack.ContextReplacementPlugin(
                // The (\\|\/) piece accounts for path separators in *nix and Windows
                /angular(\\|\/)core(\\|\/)@angular/,
                helpers.root('./src'), // location of your src
                {} // a map of your routes
            ),

Et installez @ angular/animations package et importez dans le fichier app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserAnimationsModule
    ]
})

Je préférerai mettre à jour la dernière version d'angular. Angular V4.0.0 a réduit le poids des packages et ils ont augmenté les performances.

2
Vignesh