Jonathan Valarezo

¡Compártelo!

Migración de AngularJS a Angular: Proceso paso a paso

El desarrollo tecnológico ha llevado a que frameworks como AngularJS queden obsoletos, especialmente tras el fin de su soporte oficial en enero de 2022. Por ello, migrar a versiones más modernas como Angular se ha vuelto esencial para mantener aplicaciones eficientes y seguras. Este artículo tiene como objetivo ofrecer una guía completa del proceso de migración desde AngularJS a una versión reciente de Angular (por ejemplo, Angular 15 o Angular 16).

La evolución de Angular desde su primera generación (AngularJS, también conocida como Angular 1.x) hasta las versiones más recientes (desde Angular 2 en adelante) ha supuesto un cambio radical en la arquitectura, herramientas y prácticas de desarrollo. La transición hacia un marco más moderno, basado en componentes y en TypeScript, ha brindado mayor escalabilidad, mantenibilidad y rendimiento. Por ello, abordaremos las diferencias clave entre ambas versiones, las herramientas y técnicas que facilitan la migración, así como un caso práctico detallado paso a paso. Además, se proporcionará bibliografía para profundizar y referencias a recursos oficiales y de la comunidad.

1. Diferencias clave entre AngularJS y Angular

AngularJS se construyó originalmente bajo el paradigma MVC, con scopes, controladores y directivas que a menudo generaban cierta complejidad en la lógica de la vista y el modelo. Angular, desde su segunda versión, adoptó una arquitectura basada en componentes y módulos que permiten organizar el código de forma más clara y escalable.

Arquitectura

Angular (moderno) se estructura en módulos y componentes, lo que facilita la segmentación de la funcionalidad y promueve el reuso de código. AngularJS utilizaba controladores y scopes, lo que dificultaba la escalabilidad en aplicaciones más grandes.

Lenguaje y herramientas

Angular recomienda TypeScript, un superset de JavaScript con tipado estático que reduce errores en tiempo de desarrollo. Además, la CLI (Command Line Interface) facilita la creación y mantenimiento de proyectos, generando componentes, servicios y módulos con rapidez.

Rendimiento y optimización

Angular incorpora compilación AoT (Ahead-of-Time) que compila las plantillas en tiempo de construcción, reduciendo la carga en el navegador. También emplea detección de cambios más eficiente y estrategias de carga diferida (Lazy Loading) que mejoran la velocidad de las aplicaciones.

Comparativa de Arquitecturas AngularJS vs Angular

2. Preparación previa a la migración

Antes de migrar, es indispensable realizar una fase de preparación:

Revisión del código existente:

Identificar las partes del código más complejas, directivas personalizadas en AngularJS y servicios altamente acoplados. Estas áreas serán las de mayor complejidad durante la migración.

Evaluación de dependencias:

Revisar librerías de terceros utilizadas con AngularJS y comprobar si existen equivalentes para Angular moderno o si es necesario reescribir ciertas funcionalidades.

Actualización del entorno de desarrollo:

Asegurarse de contar con Node.js (LTS), NPM y Angular CLI:

Esto permite crear nuevos proyectos Angular y facilitar la migración de componentes.

3. Proceso de migración de AngularJS a Angular paso a paso

La migración puede hacerse de forma incremental utilizando @angular/upgrade (ngUpgrade), que permite mantener ambas arquitecturas en paralelo.

Creación de un proyecto Angular base:

Esto crea la estructura básica con Angular y su CLI, incluyendo carpetas para componentes, servicios y pruebas.

Instalación de @angular/upgrade:

El módulo @angular/upgrade brinda funciones para ejecutar AngularJS dentro de un entorno Angular.

Configuración híbrida:

En main.ts o en el módulo principal se integra UpgradeModule:

Con esto, la aplicación Angular puede “contener” partes de la antigua app en AngularJS, permitiendo migraciones graduales.

4. Herramientas y técnicas recomendadas

Angular CLI:

Simplifica la creación de componentes, servicios y módulos, además de proporcionar comandos para pruebas, compilación y despliegue.

ngUpgrade (UpgradeModule):

Permite ejecutar código AngularJS dentro de Angular. Con downgradeComponent y downgradeInjectable se pueden reutilizar componentes y servicios Angular en AngularJS y viceversa.

Guías oficiales de migración:

La página https://v17.angular.io/guide/upgrade ofrece una guía detallada sobre cómo actualizar entre versiones de Angular, incluyendo consejos para pasar de AngularJS a Angular.

Pruebas durante la migración:

Es recomendable mantener o implementar pruebas unitarias (Jasmine, Karma) y de extremo a extremo (Protractor, Cypress) para garantizar que, a medida que se migra el código, la funcionalidad permanece intacta.

Página oficial de Angular Update Guide

5. Caso práctico: Migrando un componente de AngularJS a Angular

Imaginemos un componente (directiva en AngularJS) que muestra la información de un usuario, userProfile.

Código en AngularJS (userProfile.directive.js):

Vista original del componente en AngularJS

Paso 1: Crear el componente equivalente en Angular:

Usando la CLI:

Esto genera un nuevo componente Angular en src/app/user-profile.

Código en user-profile.component.ts:

Paso 2: Integrar el componente Angular en el entorno híbrido:

Para reutilizar el componente Angular dentro de AngularJS, se utiliza downgradeComponent:

Este código se ubica en un archivo de configuración híbrida (por ejemplo, upgrade-adapter.ts o en el propio main.ts tras la configuración inicial).

Paso 3: Verificar en el navegador:

Ejecutar la aplicación y revisar que el componente se muestre correctamente. Si la app sirve datos a user, estos se representarán ahora con el componente Angular, aunque la app siga teniendo partes en AngularJS.

Paso 4: Migrar gradualmente otros componentes y servicios:

Repetir este proceso para cada parte de la aplicación, migrando controladores a componentes, servicios a inyectables de Angular y finalmente eliminando AngularJS cuando toda la funcionalidad esté portada.

6. Conclusión

La migración de AngularJS a Angular es un proceso que puede parecer complejo, pero las herramientas y guías disponibles lo hacen más abordable. Planificar la migración, entender las diferencias fundamentales y emplear técnicas híbridas (como ngUpgrade) permite avanzar de forma incremental, sin interrumpir el desarrollo ni la experiencia del usuario.

Una vez completada la migración, el equipo podrá disfrutar de un ecosistema moderno, con mejoras de rendimiento, mayor mantenibilidad, y acceso a un ciclo de actualizaciones frecuente y bien documentado. Esto se traduce en aplicaciones más robustas, escalables y alineadas con las mejores prácticas de la industria.