El ciclo de lanzamiento de Angular, con actualizaciones importantes cada seis meses y versiones menores en el medio, puede dificultar la integración de las últimas funciones sin interrumpir los proyectos o sentir un miedo constante a perderse las capacidades recién lanzadas.
Para aliviar esto, Angular proporciona esquemas (scripts que automatizan las modificaciones de código) para ayudar a los desarrolladores a actualizar versiones y aplicar transformaciones necesarias para adoptar nuevas capacidades y convenciones de codificación con el mínimo esfuerzo.
Los esquemas ganaron una atención significativa en Angular 18.2 con la disponibilidad de nuevos scripts de migración dedicados a ayudar en la transición a la función inject() y a adoptar rutas de carga diferida para componentes independientes.
Angular 19 se basa en esta tendencia con una colección ampliada de esquemas para apoyar aún más la modernización del código.
En este artículo, obtendremos una visión general de los esquemas de migración disponibles actualmente que ayudan a alinear su base de código con las últimas características del framework.
Migraciones independientes
Con el impulso hacia componentes, directivas y tuberías independientes desde Angular 14, tenemos una forma más eficiente de crear y escalar aplicaciones sin la sobrecarga de los NgModules tradicionales.
En Angular 19, las nuevas aplicaciones son independientes por defecto, mientras que las existentes que aún no han migrado pueden adoptar de forma incremental el enfoque independiente ejecutando el siguiente comando:
ng generate @angular/core:standaloneUna vez que ejecutes el comando, sigue los pasos detallados que se describen en la documentación oficial para completar con éxito la migración independiente.
Cuando estés listo para actualizar Angular de la v18 a la v19 usando ng upgrade, la migración explicit-standalone-flag añade automáticamente standalone:false al decorador de las declaraciones no independientes y elimina la propiedad standalone:true de las ya configuradas como independientes, simplificando la experiencia de autoría.
La transición a la configuración independiente abre oportunidades de optimización adicionales. Una de ellas es la migración de rutas de carga diferida, que encuentra componentes independientes que están cargados actualmente de forma inmediata y los cambia a rutas de carga diferida, lo que da como resultado fragmentos de JavaScript más pequeños que se cargan bajo demanda, lo que a su vez acelera la carga de las páginas. Para aplicar esta migración, ejecute el siguiente comando:
ng generate @angular/core:route-lazy-loadingDespués, puede utilizar herramientas como Lighthouse para medir las mejoras de rendimiento y evaluar el impacto en su aplicación.
Migración de la sintaxis de las plantillas
Durante el renacimiento del framework, Angular 17 introdujo un nuevo flujo de control para mejorar la estructura interna y la legibilidad del código. Si todavía utiliza directivas estructurales tradicionales como *ngIf y *ngFor, puede que sea el momento de cambiar a esta sintaxis más intuitiva, que simplifica la lógica condicional y de bucle compleja.
Para facilitar esta transición, puede ejecutar el siguiente comando, dejando que la migración se encargue de gran parte del trabajo repetitivo por usted:
ng generate @angular/core:control-flowInyección de dependencias Migración
El cambio de Angular al enfoque funcional inject() para la inyección de dependencias ha mejorado tanto la legibilidad como la seguridad de los tipos.
Si su proyecto sigue basándose en el método tradicional basado en constructores, la ejecución del siguiente comando reemplazará las inyecciones dentro de los parámetros del constructor con llamadas inject() en su código base:
ng generate @angular/core:injectAl igual que con otros scripts de migración, asegúrese de revisar los cambios, actualizar las pruebas unitarias y abordar manualmente cualquier problema que pueda surgir antes de confirmar su código y ponerlo en producción.
Migraciones de signals
A medida que el marco de trabajo pasa a un modelo de reactividad basado en signals, un conjunto de migraciones ofrece una vía para obtener rápidamente los beneficios del gráfico de signals.
En Angular 19, tenemos la opción de ejecutar el siguiente comando para consolidar todos los esquemas relacionados con las signals en una sola migración:
ng generate @angular/core:signalsSi prefiere un enfoque más controlado, puede ejecutar cada migración individualmente. 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-queriesDe forma predeterminada, esta migración deja sin modificar algunas consultas tradicionales si no se pueden convertir de forma segura. Es una buena práctica añadir el indicador —insert-todos para tener comentarios TODO significativos junto a cualquier decorador de consultas que no se haya podido migrar automáticamente, lo que le proporciona una visión clara de lo que necesita refactorización manual.
Si prefiere un enfoque más agresivo, puede utilizar el indicador —best-effort-mode, que permite que la migración intente refactorizar tantas consultas como sea posible, incluso si algunos cambios pueden romper su aplicación y aún así requerir su intervención.
Para adoptar aún más Signals dentro de su estructura de componentes, puede actualizar las propiedades tradicionales @Input() para utilizar la función input() basada en Signals 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. Y al igual que con la migración de consultas, los indicadores —insert-todos y —best-effort-mode están disponibles para guiar los ajustes manuales e intentar una refactorización más extensa basada en las necesidades de su proyecto.
Del mismo modo, el siguiente comando actualiza las declaraciones @Output() a su equivalente funcional y ajusta sus referencias:
ng generate @angular/core:output-migrationEs importante señalar que, aunque la función output() utiliza una sintaxis similar a la de Signal, en realidad no es una función similar a input(). Se eligió esta sintaxis coherente para simplificar la creación de componentes y mejorar la seguridad de los tipos, haciendo que las interacciones entre componentes sean más legibles y fiables.
Outro
Estos scripts de migración no solo abren la puerta a las prácticas de codificación modernas, sino que también mejoran el rendimiento y la capacidad de mantenimiento de su aplicación.
A medida que adopte estos cambios, me encantaría preguntarle: ¿qué migraciones adicionales cree que serían valiosas más allá de las proporcionadas en el núcleo de Angular?
