Angular utiliza TypeScript como lenguaje de programación y ofrece una arquitectura basada en componentes, en la que los distintos elementos de la interfaz de usuario se organizan en componentes reutilizables.
Si quieres aprender más sobre Angular te recomendamos consultar la página de nuestro curso de Angular con la versión más reciente.
Actualmente existe una versión más reciente de Angular, Angular 19
El 14 de junio de 2023 el equipo de desarrolladores de Angular confirmó el lanzamiento de Angular 16 en su cuenta de Twitter, siendo esta la versión más reciente de Angular, la 16.1.
Hemos preparado un tutorial completo que te explicará cómo actualizar a la última versión disponible de Angular ,puedes consultarlo en el enlace anterior.
Angular, uno de los frameworks más populares para el desarrollo de aplicaciones web, ha lanzado su versión 16 con emocionantes mejoras en cuanto a reactividad, renderizado en el servidor y herramientas. Esta versión representa el mayor avance desde el lanzamiento inicial de Angular e incluye más de 2,500 mejoras solicitadas por la comunidad en GitHub. A continuación, vamos a explorar algunas de las novedades más destacadas de Angular 16.
En Angular 16, se ha introducido un nuevo modelo de reactividad que mejora significativamente el rendimiento y la experiencia del desarrollador. Este modelo es compatible con versiones anteriores y ofrece varias ventajas:
En Angular 16, se ha agregado una nueva biblioteca de señales (signals library
) que permite definir valores reactivos y expresar las dependencias entre ellos. Esta librería proporciona una forma más sencilla de manejar la reactividad en las aplicaciones Angular. Aquí tienes un ejemplo de cómo usarlo:
En este ejemplo, se crea un valor calculado (fullName
) que depende de las señales firstName
y lastName
. También se declara un efecto (effect
) que se ejecutará cada vez que se cambie el valor de alguna de las señales en las que depende (fullName
, en este caso).
En Angular 16, se ha mejorado la interoperabilidad con RxJS al proporcionar funciones para convertir señales en observables y viceversa. Aquí tienes un ejemplo de cómo hacerlo:
En este ejemplo, se convierte la señal count
en un observable utilizando la función toObservable
de @angular/core/rxjs-interop
. Esto permite suscribirse a los cambios de la señal utilizando el operador subscribe
.
El renderizado en el lado del servidor (Server-Side Rendering, SSR) ha mejorado significativamente en Angular 16. Ahora es más fácil y eficiente realizar el renderizado inicial en el servidor y luego hidratar la aplicación en el cliente.
Se ha agregado una nueva API y mejoras en Angular Universal, el paquete oficial de SSR de Angular. Estas mejoras incluyen:
Estas mejoras en el SSR brindan beneficios como una mejor experiencia de usuario inicial al cargar la aplicación, mejor SEO y optimización del rendimiento general.
En Angular v16, ahora puedes crear nuevos proyectos independientes desde el principio. Para probar la vista previa para desarrolladores de los esquemas independientes, asegúrate de tener Angular CLI v16 y ejecuta:
Obtendrás un proyecto más sencillo sin ningún NgModule. Además, ¡todos los generadores en el proyecto producirán directivas, componentes y pipes independientes!
Después del lanzamiento inicial de las API independientes, se pidió popularmente poder configurar Zone.js con la nueva API bootstrapApplication
.
Agregamos una opción para esto mediante provideZoneChangeDetection
:
En ng serve, ahora estamos utilizando Vite como servidor de desarrollo, ¡y esbuild potencia tanto tus compilaciones de desarrollo como de producción!
Angular CLI se basa exclusivamente en Vite como servidor de desarrollo. Para admitir la coincidencia de selectores, el compilador de Angular necesita mantener un gráfico de dependencias entre tus componentes, lo cual requiere un modelo de compilación diferente a Vite.
Puedes probar Vite + esbuild actualizando tu angular.json:
Con esta versión de Angular 16 se introduce el soporte experimental de Jest. En una versión futura, también se migrarán proyectos existentes de Karma a Web Test Runner para seguir admitiendo pruebas unitarias basadas en el navegador. Esto no afectará a la mayoría de los desarrolladores.
Puedes experimentar con Jest en nuevos proyectos instalando Jest con npm install jest --save-dev
y actualizando tu archivo angular.json:
¿Cuántas veces has utilizado un componente o un pipe en una plantilla y has recibido un error del CLI o del servicio de lenguaje que en realidad no has importado la implementación correspondiente? ¡Apuesto que muchas veces!
El servicio de lenguaje ahora permite importar automáticamente componentes y pipes.
Desde que se introdujo Angular en 2016, no ha sido posible obtener un error en tiempo de compilación si no se especifica un valor para una entrada específica. El cambio no agrega ninguna sobrecarga en tiempo de ejecución, ya que el compilador de Angular realiza la verificación en tiempo de compilación.
En v16, ahora puedes marcar una entrada como requerida:
La experiencia de desarrollo del enrutador ha avanzado rápidamente. Una característica solicitada es la capacidad de vincular los parámetros de ruta a las entradas correspondientes del componente.
Ahora puedes pasar los siguientes datos a las entradas de un componente de enrutamiento:
Aquí tienes un ejemplo de cómo puedes acceder a los datos desde un resolutor de ruta:
Puedes habilitar esta característica utilizando withComponentInputBinding
como parte de provideRouter
.
Los elementos de estilo en línea que Angular incluye en el DOM para los estilos de los componentes violan la directiva Content Security Policy (CSP) style-src por defecto. Para solucionar esto, deben contener un atributo nonce
o el servidor debe incluir un hash del contenido del estilo en la cabecera CSP. Aunque en Google no encontramos un vector de ataque significativo para esta vulnerabilidad, muchas empresas imponen políticas de CSP estrictas.
En Angular v16, se ha implementado una nueva característica que abarca el framework, Universal, CDK, Material y la CLI, que te permite especificar un atributo nonce
para los estilos de los componentes que Angular incluye en línea. Hay dos formas de especificar el nonce
: mediante el atributo ngCspNonce
o a través del token de inyección CSP_NONCE
.
El atributo ngCspNonce
es útil si tienes acceso a una plantilla en el lado del servidor que puede agregar el nonce
tanto en la cabecera como en el archivo index.html
al construir la respuesta.
La otra forma de especificar el nonce
es a través del token de inyección CSP_NONCE
. Utiliza este enfoque si tienes acceso al nonce
en tiempo de ejecución y deseas poder almacenar en caché el archivo index.html
:
Los hooks del ciclo de vida de Angular proporcionan mucho poder para conectarse en diferentes momentos de la ejecución de tu aplicación. Una oportunidad a lo largo de los años ha sido permitir una mayor flexibilidad, por ejemplo, proporcionar acceso a OnDestroy
como un observable.
En v16, se ha hecho que OnDestroy
sea inyectable, lo que permite la flexibilidad que los desarrolladores han estado solicitando. Esta nueva característica te permite inyectar DestroyRef
correspondiente a un componente, directiva, servicio o pipe, y registrar el ciclo de vida onDestroy
. DestroyRef
se puede inyectar en cualquier lugar dentro de un contexto de inyección, incluso fuera de tu componente; en ese caso, el gancho onDestroy
se ejecuta cuando el inyector correspondiente se destruye:
Una característica que te permite utilizar etiquetas de cierre automático para componentes en las plantillas de Angular. Es una pequeña mejora en la experiencia de desarrollo que podría ahorrarte algo de escritura.
Ahora puedes reemplazar:
con esto:
En resumen, Angular 16 trae consigo emocionantes novedades y mejoras que hacen que el desarrollo de aplicaciones web sea más rápido, eficiente y flexible. Desde la capacidad de crear proyectos independientes desde cero hasta el soporte para Jest en las pruebas unitarias y la mejora en la importación automática de componentes y pipes, estas actualizaciones ofrecen a los desarrolladores herramientas poderosas para crear aplicaciones web de alto rendimiento.
Si estás interesado en aprender más sobre Angular y cómo aprovechar al máximo estas nuevas características, te invitamos a consultar nuestra página del curso de Angular online o presencial, donde podrás expandir tus conocimientos y dominar esta popular plataforma de desarrollo web. ¡No pierdas la oportunidad de impulsar tu carrera en el desarrollo web con Angular!