ngupgrade - migrate angularjs to angular

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

Question

¡Hola comunidad SO y Angularians!

Por lo tanto, estoy a mitad de camino desarrollando una gran plataforma en Angular 2. Y me di cuenta de que muchas bibliotecas y dependencias externas para Angular 2 están migrando al nuevo Angular 4. Me da muchos errores, obviamente.

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

Preguntas que deben responderse para determinar si vale la pena migrar:

• Compatibilidad con Angular 2.4

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

• Cambia la aplicación de ancho

¿Debo revisar toda mi aplicación y comenzar a arreglar las cosas?

Quiero decir, ¿se han rediseñado las funcionalidades principales de tal manera que tendré que revisar muchas de ellas?

O bien, ¿hay muchas incompatibilidades de compilación / núcleo que me mantendrán ocupado los días solucionando errores de compilación / advertencias en lugar de desarrollar?

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

Por el momento, estoy investigando aquí:

• 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

ACTUALIZAR

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

Yo recomendaria:

1. Lea nuevas funciones y actualícese con Angular 4. Esto fue especialmente útil: https://angularjs.blogspot.it/2017/03/angular-400-now-available.html
2. Siga la guía de Angular y modifique su proyecto: https://angular-update-guide.firebaseapp.com/

También recomendaría comprometer su proyecto actual, crear una nueva rama en su repositorio de desarrollo y proceder con la migración en esa rama.

Un problema que encontré
Input , Output y ContentChild se importarán desde una ruta incorrecta.

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'';

Answer 1

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 carpeta vieja node_modules para evitar cualquier referencia a 2.X

2) cambie todo @angular a 4.0.0 en su paquete.json y haga una instalación de NPM. Si es posible, borre la caché.

3) Existe una gran posibilidad de que la versión de peer no coincida al realizar la instalación de NPM. Corrígelo. El video anterior explica cómo solucionar la falta de coincidencia entre iguales.

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

Answer 2

El equipo angular ha anunciado, no llamemos angular 2 o angular 4, llamémoslo angular y habrá una actualización importante por cada 6 meses. He enfrentado el problema en angular v4.0.0 así que cambie la configuración en el paquete web

  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 instale el paquete @ angular / animations e importe en el archivo app.module.ts

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

@NgModule({
    imports: [
        BrowserAnimationsModule
    ]
})

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

Answer 3

Si revisa el registro de cambios, hay algunas cosas que debe tener en cuenta:

Antes de actualizar

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

Durante la actualización

• Actualice todas sus dependencias a la versión 4 y al último mecanografiado.
• 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 utiliza animaciones en su aplicación, debe importar BrowserAnimationsModule de @angular/platform-browser/animations en su App NgModule .
• Reemplace RootRenderer con RendererFactory2 .
• Reemplazar Renderer con Renderer2 .

Después de la actualización

• Cambia el nombre de template etiquetas de tu template a ng-template .
• Reemplace OpaqueTokens con InjectionTokens .
• Si llama a DifferFactory.create(...) elimine el argumento ChangeDetectorRef .
• Reemplace ngOutletContext con ngTemplateOutletContext .
• Reemplace CollectionChangeRecord con IterableChangeRecord

https://angular-update-guide.firebaseapp.com/