Categorías
Desarrollo

Principales novedades de Angular 15

En este post te contaremos cuáles son las novedades que trae Angular en su versión número 15, la cual cuenta con grandes características.

A continuación te presentamos las principales novedades de la versión 15 de Angular.

Standalone Components

Los Standalone Components proporcionan una forma simplificada de crear aplicaciones Angular sin necesidad de módulos.

Con marcar el componente como standalone: true, este pasará a ser independiente y no necesitará estar declarado en el NgModule de tu proyecto.

Por ejemplo:

@Component({ 
  standalone: true, 
  selector: 'photo-gallery', 
  imports: [ImageGridComponent],
  template: ` 
     ... <image-grid [images]="imageList"></image-grid> 
  `, 
})
export class PhotoGalleryComponent {
 
}

Con esta característica se mantienen las bases, la arquitectura y las buenas prácticas de Angular, reduciendo así la curva de aprendizaje.

Lazy Loading

De forma predeterminada los módulos en Angular se cargan tan pronto como se carga la aplicación, sean necesarios o no.

Para aplicaciones con mucha carga de rutas, puedes usar lazy loading, un patrón de diseño que carga los módulos cuando lo necesites.

En esta versión gracias a los Standalone Components vas a poder implementarlo directamente en tus componentes de esta forma:

@Component({
  standalone: true,
  template: '...'
})
export default class LazyComponent { ... }
{ 
  path: 'lazy',
  loadComponent: () => import('./lazy-file'),
}

Nueva directiva de imágenes

Con esta nueva directiva notaremos una mejora en la carga de las imágenes y por consecuente una reducción de los tiempos de carga en nuestra página web.

import { NgOptimizedImage } from '@angular/common';

<img ngSrc="image.jpg">

Guardias  de rutas funcionales

Los Guards o Guardianes son usados en Angular para dar o no acceso a ciertas partes de tu aplicación a través de rutas.

Los nuevos Functional Router Guards ofrecen un enfoque más ágil para implementar Guards directamente en la declaración.

Como podemos ver en este ejemplo podemos inyectar el AuthService y llamar a su método isAuthenticated() en la declaración de nuestra ruta:

const route = {
  path: 'dashboard',
  canActivate: [() => inject(AuthService).isAuthenticated()]
};

De esta forma solo los usuarios autenticados podrán acceder a la ruta indicada.

Novedades en Angular CDK

Angular CDK brinda a los desarrolladores un conjunto herramientas sólidas y bien probadas para agregar patrones de interacción comunes con un esfuerzo mínimo, como por ejemplo modales y overlays.

Al conjunto de CDK se suma uno nuevo, el Listbox.

Al usar @angular/cdk/listbox, obtienes todos los comportamientos esperados de una lista, incluyendo accesibilidad, interacción, etc.

Otras mejoras

  • Ivy Landmark / Mejoras de rendimiento: La nueva versión de Angular ofrece una construcción cómoda, y la reconstrucción de HMR (Hot Module Replacement) es más fácil de habilitar.
  • Mejores stack traces: Angular DevTools ofrece ahora una vista previa de la depuración de inyección de dependencias.
  • Mejoras en los formatos de error: La nueva versión de Angular tiene una forma más completa para saber cómo y por qué se produjo un error, con formato mucho mas claro para el usuario.
  • Mejoras en el CLI: Con el objetivo de reducir la cantidad de archivos generados, al crear un nuevo espacio de trabajo Angular obtendrás una salida simplificada y menos archivos generados.
  • Soporte ESBuild: En esta versión han agregado la posibilidad de utilizar ESBuild, un empaquetador que está escrito en GO y sería el reemplazo a Webpack. Con esto algunos comandos tardan menos tiempo y hasta puedes hacer livereload.

Como puedes ver hay muchos cambios en la versión 15 del framework. Algunas novedades son bastante interesantes y, sobre todo, útiles para solucionar algunos de los problemas que te puedes encontrar utilizando versiones anteriores.

Espero que el post te haya resultado interesante y que puedas usar alguna de estas novedades en tus futuros proyectos.