Utilicemos las migraciones del núcleo de Angular para simplificar la adopción de las últimas funcionalidades del framework
El ciclo de lanzamientos de Angular, con actualizaciones importantes cada seis meses y versiones menores intermedias, puede dificultar la integración de las últimas funcionalidades sin interrumpir los proyectos o generar una sensación constante de FOMO por las características recién lanzadas.
Para mitigar esta ansiedad, Angular proporciona esquemáticas (scripts que automatizan modificaciones en el código) para ayudarnos a actualizar las versiones y aplicar transformaciones necesarias para adoptar nuevas capacidades y convenciones de código con un mínimo esfuerzo.
Las esquemáticas tuvieron una atención significativa en Angular 18.2 con la introducción de nuevos scripts de migración diseñados para facilitar la transición a la función inject() y adoptar rutas de carga diferida hacia componentes autónomos (standalone components). Angular 19 viene a reforzar esta tendencia con una colección ampliada de esquemáticas que apoyan aún más la modernización del código.
En este artículo, echaremos un vistazo general a las esquemáticas de migración disponibles que ayudan a alinear nuestra base de código con las últimas características del framework.
Migraciones a componentes autónomos
Con el impulso hacia componentes, directivas y pipes autónomas desde la versión de Angular 14, hoy en día todos contamos con una forma más eficiente de construir y escalar aplicaciones sin la sobrecarga de los NgModules tradicionales.
En Angular 19, las nuevas aplicaciones son autónomas por defecto, mientras que las existentes que no han migrado aún pueden adoptar el enfoque independiente de manera incremental ejecutando el siguiente comando:
ng generate @angular/core:standalone
Una vez que lo ejecutemos, es recomendable seguir los pasos detallados en la documentación oficial para completar exitosamente la migración a las declaraciones autónomas.
En cuanto estemos listos para actualizar Angular de la versión 18 a la 19 utilizando el comando ng upgrade, la migración explicit-standalone-flag agregará automáticamente la propiedad standalone:false al decorador de declaraciones que no son autónomas y elimina standalone:true de aquellas ya configuradas como autónomas, simplificando la experiencia de desarrollo.
La transición a una configuración autónoma abre nuevas oportunidades de optimización. Una de ellas es la migración de rutas de carga diferida (lazy loaded routes), que identifica aquellos componentes autónomos que actualmente se cargan de manera inmediata y les aplica rutas diferidas. Esto da como resultado la fragmentación de los paquetes de JavaScript en ficheros aún más divididos que recibe el navegador web cuando los necesite, mejorando el rendimiento de la aplicación.
Para aplicar esta migración, ejecutemos el siguiente comando:
ng generate @angular/core:route-lazy-loading
Posteriormente, podemos utilizar herramientas como Lighthouse para medir las mejoras de rendimiento y evaluar el impacto en nuestra aplicación.
Migración de sintaxis en plantillas
Durante el renacimiento del framework, Angular 17 introdujo un nuevo flujo de control con mejoras en la legibilidad del código y la estructuración del sistema interno. Si por casualidad aún estamos utilizando directivas estructurales tradicionales como *ngIf y *ngFor, es muy posible que sea el momento de cambiar a esta sintaxis más intuitiva, que simplifica la lógica compleja de condicionales y bucles.
Para facilitar esta transición, podemos ejecutar el siguiente comando, permitiendo que la migración se encargue de gran parte del trabajo repetitivo por nosotros:
ng generate @angular/core:control-flow
Migración de inyección de dependencias
El cambio de Angular hacia el enfoque funcional con inject() para la inyección de dependencias ha mejorado tanto la legibilidad como la seguridad de tipos de datos. Si nuestro proyecto aún depende del método tradicional basado en constructores, al ejecutar el siguiente comando se reemplazarán las inyecciones en los parámetros de constructores por llamadas a inject():
ng generate @angular/core:inject
Al igual que con otros scripts de migración, asegurémonos de siempre revisar los cambios, actualizar las pruebas unitarias y abordar manualmente cualquier problema que pueda surgir.
Migraciones a Signals
A medida que el framework continúa adoptando el modelo de reactividad basado en Signals, se ha creado un conjunto de migraciones que permiten acoplar nuestro código con el grafo de Signals. En Angular 19, tenemos la opción de ejecutar el siguiente comando para consolidar todas las esquemáticas relacionadas con Signals en una única migración:
ng generate @angular/core:signals
Aunque si preferimos un enfoque paso a paso, más controlado, podemos ejecutar cada migración de forma individual. Por ejemplo, el siguiente comando actualiza el decorador tradicional @ViewChild() a la consulta basada en Signals viewChild() y cambia @ContentChild() a contentChild():
ng generate @angular/core:signal-queries
Por defecto, esta migración deja algunas consultas tradicionales sin cambios si no pueden convertirse de manera segura. Es una buena práctica agregar la bandera — insert-todos para incluir comentarios TODO junto a cualquier decorador de consulta que no pudo ser migrado automáticamente, proporcionándonos una guía clara de lo que requiere refactorización manual.
De preferir un enfoque más agresivo, podemos utilizar la opción — best-effort-mode, que permite que la migración intente refactorizar tantas consultas como sea posible, incluso si algunos cambios puedan romper la aplicación, requiriendo igual aún nuestra intervención.
Para continuar adoptando Signals dentro de la estructura de nuestros componentes, podemos actualizar las propiedades tradicionales de @Input() para usar la función basada en Signals input() ejecutando el siguiente comando:
ng generate @angular/core:signal-input
Este cambio mejora el rendimiento al consolidar un flujo de datos más reactivo dentro de los componentes. Al igual que con la migración de consultas, las banderas — insert-todos y — best-effort-mode están disponibles para guiar ajustes manuales y permitir un refactorizado más amplio según las necesidades de nuestro proyecto.
De manera similar, el siguiente comando actualiza las declaraciones de @Output() a su equivalente funcional y ajusta de paso sus referencias:
ng generate @angular/core:output-migration
Es importante destacar que, aunque la función output() utiliza una sintaxis similar a Signals, no es en realidad un Signal como input(). Esta sintaxis coherente fue elegida para simplificar la creación de componentes y mejorar la seguridad de tipos, haciendo que las interacciones entre componentes sean más legibles y confiables.
Conclusión
Estos scripts de migración no solo abren la puerta a prácticas de codificación modernas, sino que también mejoran el rendimiento y el mantenimiento de nuestras aplicaciones.
A medida que adoptes estos cambios, me encantaría preguntarte: ¿qué migraciones adicionales considerarías valiosas más allá de las que se proporcionan en el núcleo de Angular?
Read the English version of this article on the ng-conf blog:
Modernize Your Angular App with Migration Schematics
Moderniza tu aplicación de Angular con esquemáticas de migración was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.