¿Vale la pena migrar de Angular 2 a Angular 4?

Question

¿Vale la pena migrar de Angular 2 a Angular 4?

Hola a la comunidad y angularios!

Así que estoy a mitad de camino desarrollando una enorme plataforma en Angular 2. Y me di cuenta de que muchas bibliotecas externas y dependencias para Angular 2 están migrando a la nueva Angular 4. Me está dando muchos errores, obviamente.

Podría bifurcar estas bibliotecas y usar las versiones bifurcadas y suscribirse al desarrollo de la biblioteca principal o, simplemente podría actualizar a Angular 4 mi proyecto.

Preguntas a responder para determinar si vale la pena me para migrar:

Compatibilidad con Angular 2.4

He encontrado algunas adaptaciones para asegurar la compatibilidad con el legado, como esta: https://github.com/angular/angular/commit/e99d721

Cambia la aplicación de ancho

¿Tengo que revisar toda mi aplicación y empezar a arreglar las cosas?

Quiero decir, ¿están las principales funcionalidades reelaboradas de tal manera que tendré que revisar muchas de ellas?

O, hay muchas incompatibilidades de compilación / núcleo que me mantendrán días ocupados arreglando errores de compilación / advertencias en lugar de desarrollarme?

No estoy pidiendo a alguien que haga la investigación por mí, estoy pidiendo a las personas que tal vez ya pasaron por este proceso o simplemente conocen bien ambas versiones con el fin de darme algunos consejos de experiencia, aclaraciones, etc.

En este momento, estoy haciendo mi investigación aquí:

ACTUALIZACIÓN

Acabo de migrar a Angular 4. El enlace que @PierreDuc puso en su respuesta es una herramienta muy agradable para tener una guía decente en la migración proceso.

Yo recomendaría:

Lea las nuevas características y actualice con Angular 4. Esto fue especialmente útil: https://angularjs.blogspot.it/2017/03/angular-400-now-available.html
Siga las directrices de Angular y modifique su proyecto: https://angular-update-guide.firebaseapp.com /

También recomendaría confirmar su proyecto actual, crear una nueva rama en su repositorio dev y proceder con la migración en ese Sucursal.

Un problema que encontré:
Input, Output y ContentChild se importará desde un camino equivocado.

Mi caso:

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

Solución:

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

26

angular migration angular4

Author: SrAxi, 2017-03-30

Source

3 answers

El equipo Angular ha anunciado , no llamemos angular 2 o angular 4, llamémoslo Angular y habrá una actualización importante cada 6 meses.He enfrentado el problema en angular v4.0. 0, así que cambie la configuración en 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
            ),

E instalar @angular/animations paquete e importar en la aplicación.módulo.ts file

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

@NgModule({
    imports: [
        BrowserAnimationsModule
    ]
})

Prefiero actualizar a la última versión de angular. Angular V4.0.0 ha reducido el peso de los paquetes y han aumentado el rendimiento.

2

Author: Vignesh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-30 11:37:01

Aquí hay un bonito video de 12 minutos que muestra cómo migrar de angular 2 a angular 4. Dicho y hecho hay 3 pasos básicos a seguir :-

1) Elimine la antigua carpeta node_modules para evitar cualquier referencia a 2.X

2) cambie all @angular a 4.0.0 en su paquete.json y hacer una instalación NPM. Si es posible, por favor borre la caché.

3) Existe una alta posibilidad de que se produzca un desajuste de la versión de pares cuando se realiza la instalación de NPM. corrígelo. Lo anterior el video explica cómo solucionar el desajuste entre pares.

Como se dijo en las respuestas anteriores, necesita implementar interfaces para eventos, etc. Por alguna razón no tuve ningún problema y los eventos funcionaron como antes en Angular 2.

2

Author: Shivprasad Koirala,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-20 02:47:52

score 25 · Accepted Answer

Si revisas la lista de cambios, hay un par de cosas que debes tener en cuenta:

Antes de actualizar

Asegúrese de no usar extends OnInit, ni usar extends con ningún evento del ciclo de vida. En su lugar use implements <lifecycle event>.
Deje de usar DefaultIterableDiffer, KeyValueDiffers#factories, o IterableDiffers#factories
Deje de usar importaciones profundas, estos símbolos ahora están marcados con ɵ y son no es parte de nuestra API pública.
Deje de usar Renderer.invokeElementMethod ya que este método ha sido quitar. Actualmente no hay un reemplazo.

Durante la actualización

Actualice todas sus dependencias a la versión 4 y al último typescript.
Si está utilizando Linux / Mac, puede usar: 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 usa animaciones en su aplicación, debe importar BrowserAnimationsModule de @angular/platform-browser/animations en tu App NgModule.
Sustitúyase RootRenderer por RendererFactory2.
Sustitúyase Renderer por Renderer2.

Después de la actualización

Cambie el nombre de sus etiquetas template a ng-template.
Sustitúyase OpaqueTokens por InjectionTokens.
Si llama a DifferFactory.create(...) elimine el ChangeDetectorRef argumento.
Sustitúyase ngOutletContext por ngTemplateOutletContext.
Sustitúyase CollectionChangeRecord por IterableChangeRecord

Fuente