Novedades de Angular v12

El 12 de mayo del 2021, se lanzo el release de Angular v12.

En este post quiero compartir algunas de las novedades de esta versión.

Empecemos...

Migrando a Ivy por completo

La nueva evolución de Angular que llego con Ivy ahora se esta completando, el equipo se esta moviendo por completo a Ivy.

Al antiguo view engine de Angular ha quedado obsoleto y se eliminará en una versión futura.

Aunque view engine está obsoleto, existen algunas librerías que lo utilizan y que seguirán funcionando con Ivy. (No se requiere que los desarrolladores hagan algún cambio especifico para obtener este soporte), pero los autores de las librerías deben preocuparse por realizar la transición a Ivy.

ID de mensajes de i18n

Actualmente, hay varios formatos de identificación de mensajes que son legacy los cuales se utilizan en el sistema i18n. Con estos identificadores pueden surgir algunos problemas (con los espacios en blanco por ejemplo). Para resolver esos problemas el equipo de Angular esta migrando por completo a los nuevos ID de mensajes. El nuevo formato de identificación de mensajes es mucho más intuitivo.

Desde v11, los nuevos proyectos se configuran automáticamente para usar los nuevos ID de mensajes. aquí una guía para la migración de legacy ids al nuevo formato.

El futuro de Protactor

El equipo de Angular ha optado por no incluir Protactor en nuevos proyectos, y está brindando soluciones de terceros que son bastante populares como Cypress, esto para ayudar a que los desarrolladores tengan soluciones alternativas.

También el equipo ha estado en constante trabajo con la comunidad para escuchar sus comentarios sobre Protactor y en base a eso poder tomar una decisión en el futuro.

Más información aquí.

Operador null-coalescing (??)

El operador null-coalescing (??) ha permitido a los desarrolladores escribir un código mas limpio y práctico en TypeScript. Ahora con el release de Angular v12 tenemos soporte para utilizar este operador en las plantillas de los componentes.

Entonces, eso quiere decir que si tenemos una sintaxis como la siguiente:

{{impuesto !== null && impuesto !== undefined ? impuesto: calcularImpuesto()}}

Se convierte en lo siguiente:

{{impuesto ?? calcularImpuesto()}}

Mejoras en la documentación

Siempre hay mucha gente queriendo aprender Angular y no sabe por donde iniciar, el equipo de Angular ha identificado algunas oportunidades de mejora y ha realizado un gran esfuerzo por mejorar documentación oficial angular.io

Han escrito varias guías para los que vienen iniciando con el framework, esto está en un apartado llamado "Understanding Angular", si bien estas guías no son nuevas, el equipo ha estado en constante mejora de este contenido y agregando cada vez más, tal es el caso de la guía Content projection.

También se actualizo la guía para contribuciones.

Sass en línea

A partir de la v12, los componentes de Angular ahora admitirán Sass en línea en el campo styles del decorador @component.

Anteriormente, Sass solo estaba disponible en recursos externos debido al compilador Angular. Para activar esta función en las aplicaciones existentes tenemos que añadir "inlineStyleLanguage": "scss”a angular.json. De lo contrario, estará disponible para nuevos proyectos que utilicen SCSS.

Angular CDK y Angular Material

Angular CDK y Angular Material han adoptado internamente el nuevo sistema de módulos de Sass. Los desarrolladores deben asegurarse de cambiar el paquete "node-sass" al paquete "sass".

El node-sass ya no esta al día con la nuevas funciones de sass.

Ademas, ambos (Angular CDK y Angular Material) exponen una nueva API diseñada para se consumida con la nueva sintaxis @use.

Cuando se actualiza una aplicación a la v12, la app cambiara automáticamente a la nueva API de sass.

Visita la documentación oficial de Angular Material para obtener mas información.

Soporte de Webpack 5 en produción

En la v11 se agrego soporte experimental para Webpack 5, ahora con la v12 tenemos soporte de Webpack 5 para su uso en producción.

Modo producción y modo estricto por defecto, TypeScript 4.2

La ejecución ng build ahora tiene como valor predeterminado producción.

El modo estricto está habilitado de forma predeterminada en la CLI.

Angular v12 es compatible con TypeScript 4.2

Desactivación del soporte para IE11

El equipo esta enfocado en brindar soluciones modernas para el framework, eliminar el soporte de esta compatibilidad permite que se puedan enfocar en otras soluciones y brindar una mejor experiencias a los usuarios y desarrolladores.

Angular v12 incluye un nuevo mensaje de advertencia en navegadores IE11, este soporte de eliminará por completo en Angular v13.

Actualizar a la v12

Angular nos brinda un comando para actualizar nuestras aplicaciones de una manera sencilla el cual es ng update.

Si tenemos aplicaciones un poco mas complejas podemos seguir la guía para actualizar, la pueden encontrar aquí.

Conclusiones

Me alegra mucho que el equipo de Angular ahora este mas conectado con la comunidad, escuchando sus comentarios y trabajando en conjunto.

Angular v12 llego con muchas características importantes que sin duda nos ayudaran a mejorar nuestra experiencia como desarrolladores, y a su vez la de los usuarios.

Gracias por leer está publicación.