Anunciado Angular v22

• Angular v22 amplía los flujos para agentes de IA con herramientas de control del servidor de desarrollo en Angular MCP, Angular Agent Skills, WebMCP experimental y flujos de generación de Angular en Google AI Studio y Gemini Canvas
• Con el objetivo de mejorar la estabilidad y la experiencia de desarrollo, lleva Signal Forms, Angular Aria y resource·httpResource de etapas experimental/preview a estado listo para producción
• Signal Forms es una API declarativa de formularios que combina Reactive Forms, formularios fuertemente tipados, formularios basados en plantillas y la reactividad de signals; además, ya completó mejoras de documentación, incorporación de feedback de la comunidad y soporte para Angular Material y Angular Aria
• Las mejoras en API y plantillas incluyen la integración del Navigation API en Router, control de limpieza de recursos de rutas, soporte para @Service e injectAsync, comentarios en elementos HTML, spread/rest, verificación de @switch y funciones flecha en plantillas
• Angular v22 refuerza su base para el futuro con OnPush como valor predeterminado en apps nuevas, el cambio de nombre de ChangeDetectionStrategy.Eager, el developer preview de @boundary en el tercer trimestre de 2026, la futura descontinuación del soporte de la familia Webpack y el enfoque en TSGo

---

Funciones que pasaron a estado listo para producción

• Signal Forms es una API de formularios reactiva, componible y declarativa que combina las ventajas de Reactive Forms, los formularios fuertemente tipados, los elementos preferidos de los formularios basados en plantillas y la reactividad de signals
• Desde el lanzamiento de v21, se actualizó la guía de formularios de angular.dev, se incorporaron comentarios e issues de la comunidad, y se añadió soporte para integración con Angular Material y Angular Aria
• Angular Aria es un conjunto de primitivas de accesibilidad diseñado para que los desarrolladores se encarguen del estilo y la lógica de negocio, mientras que las directivas y patrones de UI manejan la accesibilidad; en v22 queda disponible para uso en producción
• Los 12 patrones de UI de Angular Aria cubren patrones de accesibilidad comunes, con APIs estabilizadas, soporte completo para Signal Forms y test harnesses
• La API reactiva asíncrona permite manejar recursos asíncronos con la usabilidad de signals mediante resource, y tratar la obtención de datos HTTP con un modelo más declarativo mediante httpResource
• resource y httpResource pueden usarse en aplicaciones de producción desde v22, y su uso puede consultarse en la guía oficial

Desarrollo con IA y flujos de trabajo con agentes

• Angular v22 amplía los flujos para aplicaciones AI-native en tres áreas: herramientas de agentes para escribir código, herramientas de agentes en el navegador y plataformas de desarrollo con IA
• En Angular MCP, devserver.wait_for_build ayuda a que el agente construya la aplicación y revise el resultado para decidir el siguiente paso, y permite crear bucles de auto-reparación basados en errores de código en los logs de compilación
• devserver.start y devserver.stop se encargan de iniciar y detener el servidor de desarrollo, y estas herramientas pasan a stable en v22 junto con herramientas de testing y end-to-end
• Angular MCP sigue ampliando su lista de herramientas para ayudar al desarrollo moderno en Angular, como ai_tutor, modernize y onpush_zoneless_migration
• angular-developer de Angular Agent Skills ofrece al modelo lineamientos para desarrollo moderno con Angular, incluyendo funciones recientes como Angular Aria y Signal Forms; el archivo tiene menos de 140 líneas y usa un enfoque de divulgación progresiva que carga ejemplos de código y archivos de referencia cuando se necesitan
• angular-new-app guía a usuarios que exploran Angular por primera vez en un entorno de agentes para configurar un entorno local de desarrollo con Angular, y estas skills pueden usarse en herramientas de desarrollo con IA como Antigravity o en entornos de flujo de trabajo con agentes
• Las Contributor Skills ayudan a entender el modelo mental necesario para desarrollar funciones dentro del codebase de Angular, y son valiosas tanto para quienes preparan su primer pull request como para integrantes experimentados del equipo
• El WebMCP experimental permite crear y exponer herramientas estructuradas para que los agentes las usen dentro del navegador, reduciendo la necesidad de interacción con el DOM, y admite definiciones de herramientas para toda la app, routes y services, además de generación automática dinámica de herramientas basada en Signal Forms
• La documentación de integración de WebMCP puede consultarse en angular.dev/ai/webmcp
• Google AI Studio y Gemini Canvas ayudan a builders sin experiencia tradicional en programación a iniciar proyectos basados en Angular, y el sandbox de código integrado en la app web de Gemini permite crear una aplicación completa dentro del navegador
• En el flujo de Gemini, si se especifica “Angular” en el prompt, se genera una app Angular; después de generarla, se puede editar manualmente en el navegador, seguir refinándola conversando con la IA o pedir integración con Firebase
• En Google AI Studio puede usarse un flujo similar seleccionando Angular en el configuration panel e iniciando el prompt; tras la generación, se pueden añadir funciones por chat y continuar hasta el despliegue

Router y API de inyección de dependencias

• La integración con Navigation API alinea Router con la Navigation API nativa del navegador y ofrece control de navegación de la app con menos boilerplate
• Router puede interceptar automáticamente todas las navigation request, incluyendo RouterLink y las etiquetas anchor estándar
• Aprovecha el comportamiento nativo de scroll para que, al navegar hacia atrás o adelante, el usuario llegue a la posición esperada, sin lógica personalizada de gestión de scroll ni impacto en el tamaño del bundle
• Al conectarse directamente con el lifecycle nativo de navegación del navegador, facilita manejar indicadores globales de carga y anuncios de accesibilidad precisos durante transiciones de página
• El control de limpieza de rutas aborda la gestión de memoria de forma más explícita con dos funciones: withExperimentalAutoCleanupInjectors y destroyDetachedRouteHandle
• withExperimentalAutoCleanupInjectors destruye automáticamente los dependency injectors asociados con rutas que ya no están activas, limpiando providers y recursos inactivos a nivel de ruta
• destroyDetachedRouteHandle es una API pública oficial para destruir correctamente los componentes dentro de detached route handles cuando se usa una RouteReuseStrategy personalizada
• El decorador @Service reemplaza el patrón @Injectable({ providedIn: 'root' }) en la mayoría de los casos de uso, aunque @Injectable sigue siendo útil cuando se requiere configuración más profunda o constructor injection
• injectAsync admite inyección de dependencias asíncrona en services, permitiendo code splitting y carga bajo demanda; el service debe estar auto-provided, y @Service se encarga de eso
• En el ejemplo de injectAsync, el service ReportExporter no se carga hasta su primer uso, y también permite configuración de prefetch como prefetch: onIdle
• Su uso puede consultarse en la documentación oficial de injectAsync
• Entre otras mejoras se incluyen compatibilidad total con TypeScript 6 y mejoras de rendimiento en el template pipeline y la eficiencia en runtime

Experiencia de escritura de plantillas y detección de cambios

• Ahora se pueden usar comentarios a nivel de propiedad y binding dentro de elementos HTML, mejorando la legibilidad y claridad de las plantillas, además de soportar comment toggling en VS Code
• Angular deduplica automáticamente host directives que coinciden varias veces en el mismo elemento
• Si una directiva coincide tanto en la plantilla como en host directive, tiene prioridad la coincidencia en la plantilla, y los mapas de input/output del host directive se fusionan
• Si un input u output se expone con varios nombres, Angular genera un error para evitar conflictos de nombres
• En plantillas se puede usar la sintaxis spread/rest, aplicable a object literals, array literals y llamadas de función
• @switch permite que varios @case compartan la misma salida, reduciendo la duplicación de código
• En bloques @switch que usan union types, @default never; permite obtener un error en tiempo de compilación si hay valores no manejados
• Las funciones inline en plantillas pueden usarse como arrow functions; son adecuadas para funciones cortas y simples, con la condición de no poner en la plantilla funciones complejas o de ejecución prolongada
• En aplicaciones nuevas, OnPush es la estrategia predeterminada de change detection, en línea con el objetivo de zoneless por defecto y performance by default
• El valor predeterminado anterior, ChangeDetectionStrategy.Default, pasa a llamarse ChangeDetectionStrategy.Eager para reflejar con mayor claridad su comportamiento en el ciclo de change detection

Error boundaries, desuso y dirección futura

• @boundary es una nueva API para implementar error boundaries dentro de plantillas Angular; puede capturar errores que surjan en el bloque de código envuelto y definir contenido de fallback
• Su objetivo es reducir problemas donde la falla de un solo componente derrumba toda la página en flujos críticos como un checkout de comercio electrónico
• @boundary estará disponible como developer preview en el tercer trimestre de 2026
• El soporte para Webpack, los builders de @angular-devkit/build-angular, @ngtools/webpack y otros pasan a estado deprecated en v22
• Angular se enfocará en el soporte de TSGo en el application builder, y más detalles sobre estas deprecaciones pueden consultarse en el Angular CHANGELOG

[GN⁺]

Comentarios en Hacker News

• Estoy creando una app bastante compleja con Angular v21, y la experiencia ha sido muy buena porque la carga cognitiva para crear y manejar componentes, estado y flujo de datos es baja
  Signals y signal stores lo hicieron muy fácil, y escribí todo a mano sin herramientas de codificación con IA

• Últimamente tengo que admitir que Angular ya está al nivel de ser agradable de usar
  Es una lástima que el ecosistema sea un poco áspero, pero por suerte trae muchísimas cosas integradas

  • Yo tuve la misma experiencia
    Ojalá Angular dejara atrás ese compilador raro tan acoplado a tsc y adoptara un enfoque más conectable que funcione con cualquier compilador de TypeScript
    Los tiempos de cold build de la app y de las pruebas unitarias siguen siendo flojos, pero usando agentes de código eso preocupa un poco menos
  • Me da curiosidad qué es lo áspero del ecosistema
    Nunca he tenido problemas para encontrar paquetes, y la mayoría también sigue bien el flujo con signals
  • Me pregunto si los proyectos todavía eligen cosas como RxJS, dejando el código en capas y haciendo que depurar sea un suplicio
    O si por fin volvió la cordura al ecosistema de Angular

• Hace poco actualicé un proyecto de Angular bastante complejo de v14 a v21
  Durante algunos años sentí que el desarrollo de Angular se había ralentizado, pero al ver de golpe todos los cambios entre esas versiones, se siente casi como un framework completamente nuevo

• Angular Aria se ve realmente muy bien
  La documentación está muy bien armada incluso para escenarios complejos como autocompletado, así que quiero probarlo pronto para ver si puede reemplazar el autocompletado para lectores de pantalla que antes tenía que hacer yo mismo

  • Puede que yo haya entendido algo mal, pero al probar el teclado en https://angular.dev/guide/aria/overview#showcase vi que hace navegar con las teclas de flecha en vez del mucho más común tab/shift+tab
    Incluso las propias pestañas de la documentación, justo encima de ese ejemplo, usan tab/shift+tab para mover el foco

• Esta función me entusiasma muchísimo
  Quería usar signal-forms y resources desde que eran experimentales, y desde que me pasé a signals ya no puedo volver atrás
  Tener que usar RxJS por culpa de los formularios era un gran dolor

  • Me pregunto si podrías explicar un poco más qué son los signals
    Quisiera saber si se parecen al paradigma de signals en motores de juego como Godot, donde los componentes emiten signals y otros componentes se suscriben sin importar la profundidad, o si es algo completamente distinto

• Antes de React disfrutaba usar Angular y fue una época bastante buena, pero siendo sincero, hoy casi hasta me olvido de que Angular existe
  No lo digo para elogiar a React; de hecho últimamente me gusta más el enfoque htmx
  Pero siento que ahora la competencia se desplazó a qué framework o lenguaje manejan mejor los agentes, y cuánto pueden detectar los errores el análisis estático y las herramientas a nivel compilador

• Me gusta Angular porque se siente un poco como Django
  Incluye todo lo necesario, así que es fácil de usar

  • Siento que entonces uno podría simplemente usar Django
    O usar un backend más rápido con plantillas y renderizado del lado del servidor, sumarle htmx y conseguir una experiencia tipo aplicación de página única sin la locura de un ecosistema de JS realmente roto

• Gracias a Angular, mi carrera en programación fue divertida y nunca se sintió como trabajo
  No hay nada mejor que trabajar con un lenguaje que te gusta, aprender más y encima te paguen por ello

• Hace tiempo que no uso Angular
  Como alguien que usa otros frameworks de JavaScript como Vue, React y Svelte, me pregunto qué me estoy perdiendo
  Quisiera saber por qué la gente elige Angular sobre otros frameworks grandes

  • En general, diría que Angular encaja mejor cuando quieres convertir una aplicación anticuada en un sitio web
    Sobre todo si JavaScript y el desarrollo web no te gustan mucho y sientes que el backend es la parte principal

• La estructura es como import {signal} from "@angular/core" e import {form} from "@angular/forms/signals": signal viene de core y form viene de forms/signals
  Parece que hay alguna razón terminológica que no entiendo
  Fuera de eso, me entusiasma volver a usar Angular después de 10 años, y se ve bastante bien

  • Los signals están en core porque son la estructura de datos básica de Angular
    Los formularios basados en signals son parte del módulo Forms, así que si no usas formularios no arrastras ese overhead
  • Angular tiene muchas formas de manejar formularios
    Supongo que ese import trae los nuevos formularios basados en signals