Anunciando Angular v21

[Grego]

Blog de Angular

Anunciando Angular v21

Angular

Autores: Jens Kuehlers, Mark “Techson” Thompson

¡Qué momento tan emocionante para ser desarrollador! Con todos los avances emocionantes en IA en el desarrollo web, parece que cada día emprendemos una nueva aventura. Esto encaja perfectamente con el tema de nuestro evento de lanzamiento de v21, que ofrece una visión general de lo mejor que ofrece Angular v21.

Con el lanzamiento de v21, Angular es aún más aliado en tus aventuras diarias: te brinda la estabilidad del framework Angular mientras te permite construir excelentes aplicaciones impulsadas por IA, escalables y accesibles para todos.

Angular v21 te ofrece muchas herramientas esperadas durante mucho tiempo para agregar a tu caja de herramientas y garantiza que tengas la mejor experiencia de desarrollo, ya sea que codifiques usando agentes y asistencia de IA o prefieras escribir, depurar y probar código solo con tu IDE.

Algunos de los puntos destacados:

• Estamos lanzando Formularios de Señales experimentales, que proporcionan una nueva experiencia de formularios escalable, componible y reactiva construida sobre Señales.
• Angular Aria se lanza en vista previa para desarrolladores, ofreciéndote componentes sin interfaz construidos con accesibilidad como prioridad, que puedes estilizar a tu manera.
• Tus agentes de IA pueden usar el Servidor MCP de Angular, ahora con siete herramientas estables y experimentales, permitiendo que los LLM utilicen nuevas características de Angular desde el primer día.
• La CLI de Angular integra Vitest como el nuevo ejecutor de pruebas predeterminado. El soporte para Vitest ahora es estable y listo para producción.
• Las nuevas aplicaciones de Angular ya no incluyen zone.js por defecto.

¡Y hay mucho más! Así que ¡vamos a profundizar!

Los Formularios de Señales experimentales ya están aquí

Nos enorgullece anunciar que ahora puedes probar los Formularios de Señales, una biblioteca experimental que te permite gestionar el estado de los formularios construyendo sobre los fundamentos reactivos de las Señales.

Con Formularios de Señales, el modelo del formulario se define mediante una señal que se sincroniza automáticamente con los campos del formulario vinculados a ella, permitiendo una experiencia ergonómica para el desarrollador con seguridad de tipos completa al acceder a los campos del formulario. ¡La lógica de validación basada en esquemas potente y centralizada está integrada !

Para comenzar, crea un modelo de formulario y pásalo a form():

import { form, Field } from '@angular/forms/signals';

@Component({
  imports: [Field],
  template: `
    Email: <input [field]="loginForm.email">
    Password: <input [field]="loginForm.password">
  `
})
export class LoginForm {
  login = signal({
    email: '',
    password: ''
  });

  loginForm = form(this.login);
}

Ahora puedes vincular los campos a la plantilla usando la directiva [field]. Los patrones típicos de validación, como la validación de correo electrónico o coincidencia de expresiones regulares, ya están integrados, y los validadores personalizados te permiten crear mecanismos de validación aún más potentes.

La vinculación a componentes personalizados se basa en señales y es más fácil que nunca; ya no necesitas ControlValueAccessor.

Para comenzar, consulta la guía esencial de Formularios de Señales o la documentación completa.

Estamos emocionados de que comiences a construir con Formularios de Señales. La API de Formularios de Señales aún es experimental y seguiremos iterando basándonos en tus comentarios. Por favor, pruébala y dinos qué piensas.

Componentes accesibles — tu estilo, con Angular Aria

Estamos encantados de anunciar que lanzamos una vista previa para desarrolladores de nuestra nueva biblioteca moderna para patrones de interfaz de usuario comunes. Construimos Angular Aria con la accesibilidad como su prioridad número uno. Para comenzar, tienes acceso a un conjunto de 8 patrones de interfaz de usuario que abarcan 13 componentes completamente sin estilo y que puedes personalizar con tus propios estilos.

Angular Aria utiliza directivas modernas de Angular, se basa en señales y se construye sobre la sólida experiencia de nuestro equipo en la creación de componentes accesibles y responsivos.

Los 8 patrones que lanzamos son:

• Acordion
• Combobox
• Cuadrícula
• Lista
• Menú
• Pestañas
• Barra de herramientas
• Árbol

Angular Aria incluye componentes complejos que puedes estilizar tú mismo, como menús independientes de múltiples niveles.

Instala esta nueva biblioteca ejecutando npm i @angular/aria. Luego, dirígete a nuestra guía completa de Angular Aria que te proporciona información de uso y ejemplos de código para todos los componentes, además de una muestra de temas que puedes copiar y pegar para probar diferentes aspectos.

El equipo de Angular ahora ofrece tres formas diferentes de ayudarte a usar y desarrollar componentes:

• Usa Angular Aria para componentes sin interfaz accesibles que puedes estilizar como desees.
• Usa el CDK para primitivas de comportamiento como Arrastrar y Soltar que puedes incluir en tus propios componentes personalizados.
• Usa Angular Material para una biblioteca completa de componentes listos para usar, con estilos definidos y basados en los principios de Material Design. Puedes personalizar los componentes usando tu propio tema.

Estamos emocionados por tus comentarios sobre Angular Aria y lo que construirás con ella.

Más herramientas para tus agentes de IA — con el servidor MCP de Angular

Para asegurarnos de que estés preparado para la era de la IA, queremos garantizar que los desarrolladores tengan las herramientas adecuadas. Queremos proporcionar herramientas para la forma en que los desarrolladores trabajan ahora y cómo evolucionará su trabajo.

En v20.2 lanzamos el servidor MCP integrado en la CLI de Angular para asegurar que los agentes de IA tengan todo el contexto necesario para el desarrollo de Angular, y estamos orgullosos de anunciar que el servidor MCP ahora es estable.

El servidor MCP de Angular te proporciona un conjunto de herramientas para dar a los agentes de IA el contexto adecuado sobre Angular moderno y tu aplicación, e incluso ayudarte a convertirte en un mejor desarrollador. Puedes usar el servidor MCP para:

• Obtener contexto general: La herramienta get_best_practices proporciona la guía de mejores prácticas de Angular y la herramienta list_projects encuentra todos los proyectos de Angular en tu espacio de trabajo.
• Encontrar información actualizada: La herramienta search_documentation puede responder preguntas sobre Angular consultando la documentación oficial y la herramienta find_examples proporciona acceso a ejemplos actualizados de patrones modernos de Angular — pronto añadiremos más ejemplos, como formularios basados en señales y Angular Aria, para que tus agentes de IA puedan usar los nuevos patrones de codificación.
• Actualizar tu aplicación: La herramienta onpush_zoneless_migration puede analizar tu código y proporcionar un plan para migrar tu aplicación a la detección de cambios OnPush y sin zona. También hay una herramienta experimental llamada modernize para realizar migraciones de código usando esquemas existentes.
• Enseñarte Angular: La herramienta ai_tutor inicia un tutor interactivo de Angular impulsado por IA que puede ayudarte a aprender conceptos y obtener retroalimentación, y debe usarse con una nueva aplicación de Angular.

Con el servidor MCP puedes superar el problema de la fecha límite de conocimiento: tu LLM fue entrenado con conocimientos de Angular hasta una fecha específica, pero usando el servidor MCP, puede aprender a usar incluso características completamente nuevas como Formularios de Señales y Angular Aria — ¡solo necesitas pedirle a tu agente que encuentre ejemplos y los use!

Herramienta del tutor de IA en acción

Vitest como el nuevo ejecutor de pruebas predeterminado y estable

Desde que Karma fue deprecado en 2023, el equipo de Angular ha explorado Jest, Web Test Runner y Vitest como nuevas soluciones de prueba.

Después de recibir comentarios positivos de la comunidad, decidimos que Vitest sería nuestro nuevo ejecutor de pruebas predeterminado y lo promovemos a estable en Angular v21

Para usar Vitest en una nueva aplicación de Angular, simplemente ejecuta el comando ng test. La salida de la consola se verá así:

Salida de terminal de ejemplo de Vitest en Angular

Para obtener más información sobre pruebas con Vitest — consulta la documentación en angular.dev.

Aunque Vitest es el nuevo ejecutor de pruebas predeterminado para nuevos proyectos, Karma y Jasmine siguen siendo completamente compatibles por parte del equipo de Angular, por lo que no necesitas migrar aún.

Si estás listo para migrar tu aplicación existente para usar Vitest, hay una migración experimental que puedes ejecutar. Después de realizar algunos pasos preparatorios descritos en la guía vinculada, ejecuta:

ng g @schematics/angular:refactor-jasmine-vitest

Tus pruebas se refactorizarán automáticamente para usar Vitest.

Con el soporte de Vitest estable, decidimos deprecate el soporte experimental para Web Test Runner y Jest y planeamos eliminarlos en v22. Para equipos que deseen continuar usando Jest, consideren una de las alternativas comunitarias existentes, como jest-preset-angular y el plugin de Jest de Nx.

Zoneless está listo para el uso en producción

Angular tradicionalmente usaba zone.js, una biblioteca que parchea las APIs del navegador, para rastrear los cambios en las aplicaciones. Esto permitía la experiencia “mágica” en la que las plantillas cambian automáticamente a medida que el usuario realiza acciones en tu aplicación; sin embargo, zone.js tiene desventajas de rendimiento, especialmente para aplicaciones de alta complejidad.

Con las señales impulsando la gestión moderna del estado en Angular, zone.js ya no es necesario para la detección de cambios. La detección de cambios sin zona, introducida experimentalmente en v18, avanzó a vista previa para desarrolladores en v20 y alcanzó la estabilidad en v20.2.

A través de nuestra experiencia con aplicaciones en Google, nos volvimos cada vez más confiados de que las nuevas aplicaciones de Angular funcionan mejor sin zone.js.

• En 2024, más de la mitad de las nuevas aplicaciones de Angular dentro de Google se construyeron con la estrategia de detección de cambios sin zona, y la hicimos predeterminada a mediados de 2024.
• Ahora hay cientos de aplicaciones sin zona funcionando dentro de Google en producción.
• Externamente, al observar The HTTP Archive, vemos más de 1400 aplicaciones de Angular que usan la detección de cambios sin zona, y eso solo incluye aplicaciones públicamente accesibles sin necesidad de inicio de sesión.

Dadas estas señales sólidas, zone.js y sus funciones ya no se incluirán por defecto en las aplicaciones de Angular en v21.

Habilitar la detección de cambios sin zona proporciona beneficios como mejores Core Web Vitals, async-await nativo, compatibilidad con el ecosistema, reducción del tamaño del paquete, depuración más fácil y mejor control.

Las nuevas aplicaciones usarán automáticamente Zoneless; para aplicaciones existentes, sigue nuestras instrucciones de migración en angular.dev. También puedes probar la nueva herramienta onpush_zoneless_migration en el servidor MCP de Angular, que crea un plan paso a paso sobre cómo migrar tu aplicación a la estrategia de detección de cambios OnPush.

Aunque Zoneless es la nueva experiencia predeterminada, queremos reconocer que zone.js desempeñó un papel importante en la formación de Angular y permitió a los desarrolladores crear experiencias mágicas durante muchos años. Queremos extender un gran GRACIAS al equipo de zone.js, especialmente a Jia Li por sus contribuciones a zone.js.

Una nueva experiencia de documentación

Si visitaste angular.dev en las últimas semanas, es posible que hayas notado que hay una nueva página de inicio. Pero eso no es todo lo que ha cambiado en angular.dev — hemos realizado cambios significativos para garantizar que la experiencia de documentación sea moderna y enseñe los últimos conceptos, para que siempre puedas obtener información actualizada.

En Google I/O 2025 lanzamos angular.dev/ai — tu recurso para todo lo que necesitas para construir aplicaciones impulsadas por IA con Angular. Hemos incluido mejores prácticas, ejemplos de código, patrones de diseño y más. Incluso hemos incluido prompts de mejores prácticas y archivos de reglas personalizados para ayudar a garantizar que tus experiencias de generación de código resulten en código Angular moderno. Hemos estado implementando muchas actualizaciones, así que sigue revisando para obtener los últimos consejos y trucos sobre cómo construir aplicaciones impulsadas por IA y aprovechar las mejores estrategias de codificación asistidas por IA.

Si estás al comienzo de tu viaje en la construcción de aplicaciones reactivas, consulta el nuevo tutorial de Señales, que proporciona una visión completa de todas las APIs estables de Señales, incluyendo model(), linkedSignal() y más.

Hemos invertido una cantidad significativa de esfuerzo en actualizar nuestras guías para desarrolladores en angular.dev:

• La documentación de enrutamiento ha sido completamente renovada y proporciona información detallada sobre todos los aspectos del enrutamiento.
• Las guías de inyección de dependencias han sido ampliamente mejoradas y hechas más accesibles para desarrolladores que desean comprender los conceptos fundamentales detrás de esta poderosa característica.
• Hemos añadido una guía completa sobre enfoques para tematizar componentes de Material.
• Y por último, pero no menos importante, hay una guía completa sobre cómo usar Angular con Tailwind CSS!

Estamos comprometidos a mejorar nuestra experiencia de documentación. Para desarrolladores que usan el servidor MCP de Angular, la nueva herramienta search_documentation da a tu agente de IA acceso a la información más reciente y mejor en angular.dev.

Y mucho más…

¡Hemos estado ocupados! Además de las grandes características que hemos destacado hasta ahora, hay varias cosas más que nuestro equipo ha entregado y que merecen una mención especial:

• El soporte para la biblioteca CLDR se ha actualizado de v41 a v47, mejorando el formato de moneda, el formato de fecha, etc.
• Ahora admitimos expresiones regulares en plantillas:

@let isValidNumber = /\d+/.test(someValue);

@if (!isValidNumber) {
  <p>{{someValue}} no es un número válido!</p>
}
```}\n\n* Angular ahora tiene un [formateador integrado para Signals](https://github.com/angular/angular/pull/64000). Habilite formateadores personalizados ([Chrome](https://medium.com/@tomsu/devtools-tips-day-10-custom-formatters-58ee46e640f9), [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/custom_formatters/index.html#enabling-custom-formatting)) para usar esta función.\n\n\n\n![Captura de pantalla de un editor de código y depurador que muestra un componente Angular con dos señales inicializadas, sig y sig2. El depurador está pausado en una instrucción debugger, y el panel de inspección muestra el valor actual de la señal sig como “hello”, junto con la función de señal. A la derecha, el panel de Scope muestra la estructura de sig y sig2 dentro del ámbito del componente.|700x286](upload://2v80LWnGyGCDAmScOdgDaj15bFu.jpeg)\n\n* Ahora puedes personalizar las opciones de IntersectionObserver para los desencadenadores @defer relacionados con la vista, por ejemplo:\n\n@defer (on viewport({trigger, rootMargin: '100px'}) {\n\u003csection\u003eContenido\u003c/section\u003e\n}\n\n* [SimpleChanges ahora es genérico](https://github.com/angular/angular/pull/64535), lo que permite un mejor chequeo de tipos de los valores dentro de SimpleChanges, resolviendo un [problema muy votado](https://github.com/angular/angular/issues/17560)\n* La [tubería KeyValue ahora admite objetos con claves opcionales](https://github.com/angular/angular/pull/48814)\n* Como alternativa a las variables CSS, ahora puedes usar un nuevo conjunto de [clases utilitarias](https://github.com/angular/components/pull/31702) para aplicar directamente los tokens del sistema de Material Design en tus plantillas. ¡Consulta la [guía de tematización](http://material.angular.dev/guide/theming-your-components) para más detalles!\n* [Las superposiciones del CDK ahora usan los popovers integrados del navegador](https://github.com/angular/components/pull/32155), ayudando a resolver algunos problemas de accesibilidad\n\nY en caso de que te lo hayas perdido: estos son solo los cambios desde Angular v20.2. Si solo sigues las versiones principales, podrías haber pasado por alto:\n\n* Nuevas API para animar elementos cuando [entran y salen del DOM](https://angular.dev/guide/animations)\n* Mejoras en el CDK Drag\u0026Drop para permitir [copiar elementos entre listas](https://angular.dev/guide/drag-drop#copying-items-between-lists)\n* Visualización de rutas y gráfico de señales en [Angular DevTools](https://angular.dev/tools/devtools)\n* ¡Y mucho más! Consulta nuestra [publicación del blog de actualización de verano](https://blog.angular.dev/angular-summer-update-2025-1987592a0b42) para más detalles.\n\nY como siempre, la lista completa de cambios está en nuestro [Registro de cambios](https://github.com/angular/angular/blob/main/CHANGELOG.md).\n\n## Angular ♥️ nuestra increíble comunidad\n\nEste increíble lanzamiento no habría sido posible sin nuestra comunidad de código abierto. Muchas personas en nuestra comunidad ayudan a impulsar Angular hacia adelante, con contribuciones grandes y pequeñas, ya sea respondiendo preguntas a otros desarrolladores, organizando reuniones y conferencias, mejorando la documentación o contribuyendo con una solicitud de extracción. Si eres uno de nuestros colaboradores, ¡muchísimas gracias! Si aún no lo eres, ¡espero que esto te inspire! ¡Incluso responder una sola pregunta o ayudar a tu compañero de trabajo ayuda!\n\nDesde la v20, 215 personas han contribuido a la base de código de Angular, y queremos destacar algunas contribuciones específicas:\n\n* [Jaime Burgos](https://github.com/SkyZeroZx) mejoró varias migraciones y diagnósticos:\n• La [migración a standalone](https://angular.dev/reference/migrations/standalone) ahora tiene [soporte para CommonModule](https://github.com/angular/angular/pull/64138)\n• Una [nueva migración para el RouterTestingModule obsoleto](https://angular.dev/reference/migrations/router-testing-module-migration)\n• Un [diagnóstico para desencadenadores @defer inalcanzables o redundantes](https://github.com/angular/angular/pull/64069)\n* [Angelo Parziale](https://github.com/aparzi) creó dos migraciones:\n• [Convertir la directiva NgClass en enlaces de clase](https://angular.dev/reference/migrations/ngclass-to-class)\n• [Convertir la directiva NgStyle en enlaces de estilo](https://angular.dev/reference/migrations/ngstyle-to-style)\n* [Hryhorii Avcharov](https://github.com/Avcharov) añadió una [pestaña de Transfer State en DevTools](https://github.com/angular/angular/pull/62465) que permite inspeccionar el TransferState entre la aplicación del lado del servidor y del lado del cliente.\n* [Luke Beach](https://github.com/LukeyBeachBoy) creó una [característica de superposición del CDK que permite márgenes de vista independientes en cada lado](https://github.com/angular/components/pull/29563)\n* [Ruslan Lekhman](https://github.com/lekhmanrus) creó una [solicitud de extracción para permitir pasar un inyector a MatBottomSheetConfig](https://github.com/angular/components/pull/31965)\n* [Cédric Exbrayat](https://github.com/cexbrayat) contribuyó con [una opción llamada outputFile al ejecutor de Vitest](https://github.com/angular/angular-cli/pull/30682)\n* [Younes Jaaidi](https://github.com/yjaaidi) contribuyó con [mejoras múltiples](https://github.com/angular/angular-cli/pull/31786) [a](https://github.com/angular/angular-cli/pull/31783) [la ejecución de Vitest](http://angular.dev/guide/testing)\n\n¡Muchísimas gracias por ser parte de Angular v21!\n\n## ¡Actualización del mascota!\n\nQuizás recuerdes que te pedimos tu opinión sobre el mascota de Angular en la v20. Nuestro [RFC del mascota](https://github.com/angular/angular/discussions/61733) tuvo un récord de envíos y te debemos una actualización. Sabemos que quieres conocer a nuestro nuevo mascota, así que asegúrate de ver nuestro [evento de lanzamiento en YouTube](http://goo.gle/angular-v21) el 20 de noviembre de 2025 a las 9 a.m. hora del Pacífico para el anuncio oficial ⭐\n\n[\n![Una imagen brillante de arte pixelado de 8 bits para el evento de desarrolladores de Angular v21. El texto “V21” es prominente en grandes píxeles degradados en rosa y morado, con “DEVELOPER EVENT” centrado debajo. Un botón rosa con el logotipo de Angular está en la parte inferior. A la derecha hay un personaje de arte pixelado, un desarrollador negro con una expresión sorprendida, mirando hacia arriba y a la izquierda.|700x394](upload://29bHwNwOfowtf0ERyjkhyPJoZcs.jpeg)\n](https://youtu.be/DDAHORVzQ5g)\n\n## Es hora de construir la próxima ola de aplicaciones\n\nEstamos increíblemente orgullosos de este lanzamiento, pero este es solo un paso en el viaje de Angular. Tenemos nuestros ojos firmemente enfocados en los patrones emergentes para el futuro del desarrollo de aplicaciones web. Hemos visto el poder de la IA y queremos hacer todo lo posible para brindarte las herramientas que necesitas, sin importar cómo trabajes: ya sea con programación por vibes, agentes de IA o desarrollo tradicional.\n\nNuestras características más recientes, como Signal Forms y Angular Aria, son señales de nuestro compromiso de seguir mejorando la superficie de la API y hacer de Angular un lugar maravilloso para construir aplicaciones web escalables con confianza.\n\nAsegúrate de ejecutar `ng update` y crear aplicaciones que tus usuarios amarán.