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

Question

Bonjour la communauté et Angularians!

Donc, je suis à mi-chemin développement d'une énorme plate-forme Angulaire 2. Et j'ai réalisé que beaucoup de bibliothèques externes et les dépendances Angulaire 2 sont de la migration vers la nouvelle Angulaire 4. Qui me donne de nombreuses erreurs, évidemment.

Je pourrais fourche de ces bibliothèques et de l'utilisation de la fourche versions et abonnez-vous à la bibliothèque principale de développement ou, je pourrais juste mettre à niveau vers Angulaire 4 de mon projet.

Les réponses aux Questions afin de déterminer si cela vaut la peine pour moi de migrer:

• La compatibilité avec Angulaire 2.4

J'ai trouvé quelques adaptations afin de s'assurer de la compatibilité avec les anciens, comme ceci: https://github.com/angular/angular/commit/e99d721

• Les changements d'app large

Dois-je passer par mon ensemble de l'application et commencer à corriger les choses?

Je veux dire, sont les principales fonctionnalités retravaillé de manière à ce que je vais devoir revoir plusieurs d'entre eux?

Ou, sont-ils nombreux construire/core incompatibilités qui va me tenir jours occupés de fixation de la compilation les erreurs/avertissements au lieu de se développer?

Je ne demande pas quelqu'un pour faire la recherche pour moi, je demande à des gens qui peut-être déjà passé par ce processus, ou tout simplement savoir bien les deux versions afin de me donner quelques conseils de l'expérience, de précisions, etc.

Pour le moment, je suis en train de faire mes recherches ici:

• https://github.com/angular/angular/blob/master/CHANGELOG.md
• http://angularjs.blogspot.it/2017/03/angular-400-now-available.html
• https://learninglaravel.net/angular-4-new-features-and-improvements

Mise à JOUR

Je viens de migré vers Angulaire 4. Le lien que @PierreDuc mettre dans sa réponse, c'est un très bon outil pour avoir une bonne orientation dans le processus de migration.

Je recommanderais:

1. Lire de nouvelles fonctionnalités et de mettre à jour vous-même Angulaire 4. Cela a été spécialement utile: https://angularjs.blogspot.it/2017/03/angular-400-now-available.html
2. Suivez Angulaire de l'orientation et de modifier votre projet: https://angular-update-guide.firebaseapp.com/

Je vous recommande aussi de commettre votre projet actuel, créer une nouvelle branche dans votre dev référentiel et de procéder à la migration dans cette branche.

Un problème que j'ai rencontré:
Input, Output et ContentChild seront importées à 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';

Answer 1

Si vous consultez le changelog il ya un couple de choses que vous devez garder à l'esprit:

Avant la mise à jour

• Vous assurer de ne pas utiliser s'étend OnInit, ou de l'utilisation s'étend à tout événement de cycle de vie. Au lieu d'utiliser implements <lifecycle event>.
• Cesser d'utiliser DefaultIterableDiffer, KeyValueDiffers#factoriesou IterableDiffers#factories
• Cesser d'utiliser profonde importations, ces symboles sont maintenant marquées par ɵ et sont pas partie de notre API publique.
• Cesser d'utiliser Renderer.invokeElementMethod que cette méthode a été supprimé. Il n'y a pas actuellement d'un remplacement.

Lors de la mise à jour

• Mise à jour de l'ensemble de vos dépendances à la version 4 et la dernière tapuscrit.
• 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 l'importer BrowserAnimationsModule de @angular/platform-browser/animationsdans votre Application NgModule.
• Remplacer RootRenderer avec RendererFactory2.
• Remplacer Renderer avec Renderer2.

Après la mise à jour

• Renommer votre template balises d' ng-template.
• Remplacer OpaqueTokens avec InjectionTokens.
• Si vous appelez DifferFactory.create(...) supprimer l' ChangeDetectorRef argument.
• Remplacer ngOutletContext avec ngTemplateOutletContext.
• Remplacer CollectionChangeRecord avec IterableChangeRecord

source

Answer 2

Angulaire de l'équipe a annoncé , pour ne pas dire angulaire 2 ou angulaire 4 appelons Angulaire et il y aura une mise à jour majeure tous les 6 mois.J'ai affronté la question angulaire v4.0.0 donc modifier 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 d'installer @angulaire/animations paquet et de les importer dans l'application.le module.fichier ts

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

@NgModule({
    imports: [
        BrowserAnimationsModule
    ]
})

Je préfère de mise à jour à la dernière version de anguleux. Angulaire V4.0.0 a réduit les paquets de poids et ils ont augmenté la performance.

Answer 3

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

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

2) changer tous @angulaire de la 4.0.0 dans votre forfait.json et faire un NPM install. Si possible, veuillez faire vider le cache.

3) Il y a une forte possibilité que vous obtiendrez par les pairs incompatibilité de version lorsque vous faites NPM install. de le corriger. La vidéo ci-dessus explique comment corriger par les pairs incompatibilité.

Comme dit dans les réponses ci-dessus, vous avez besoin pour mettre en œuvre des interfaces pour l'événement. Pour une raison que je ne reçois pas tous les problèmes et les événements travaillé comme il a été précédemment Angulaire 2.