Angular 19.2

Introduction

La version 19.2 d'Angular apporte un vent de fraîcheur avec des nouveautés et des améliorations significatives. Parmi les points forts de cette mise à jour, on retrouve l'introduction de l'API expérimentale httpResource(), des évolutions des API rxResource et resource, ainsi que des fonctionnalités qui simplifient la gestion des données et l'écriture des templates. Angular continue de s'affirmer comme un framework incontournable pour le développement d'applications web modernes.

Nouvelle API httpResource !

Elle est enfin là ! La nouvelle API expérimentale pour créer des ressources qui utilisent des requêtes HTTP : httpResource(). Pour l'utiliser, il est nécessaire d'injecter HttpClient au démarrage de l'application. L'utilisation la plus simple est d'appeler cette fonction en lui passant une fonction qui renvoie l'URL de récupération des données :

readonly beersResource = httpResource<Array<Beer>>(() => 'https://random-data-api.com/api/v2/beers');

Elle va nous renvoyer les mêmes propriétés que resource mais également quelques propriétés supplémentaires spécifiques aux ressources HTTP :

• statusCode : un signal qui contient le code d'état de la réponse
• headers : un signal qui contient les en-têtes de la réponse sous forme de HttpHeaders
• progress : un signal qui contient la progression du téléchargement de la réponse sous forme de HttpProgressEvent

Il est possible de définir une ressource réactive en utilisant un signal dans la fonction qui définit l'URL. La ressource sera automatiquement rechargée lorsque le signal changera :

size = signal(10);

readonly beersResource = httpResource<Array<Beer>>(
  () => `https://random-data-api.com/api/v2/beers?size=${this.size()}`
);

Pour un contrôle plus fin sur la requête, vous pouvez également passer un objet HttpResourceRequest à la fonction httpResource(). Cet objet doit avoir une propriété url et peut avoir d'autres options comme la method (GET par défaut), params, reportProgress,headers, etc. Et pour encore plus de réactivité, vous pouvez utiliser des signaux dans les propriétés url, qu'on a vu précédemment, ainsi que params et headers.

readonly moreBeersResource = httpResource<Array<Beer>>(() => ({
  url: `https://random-data-api.com/api/v2/beers?size=${this.size()}`,
  method: 'POST',
  params: { malts: 'PALE' },
  headers: new HttpHeaders({}),
  body: JSON.stringify({}),
  reportProgress: false
}));

Par défaut, le format des données récupérées est du JSON. Cependant, vous pouvez demander d'autres formats grâce aux fonctions httpResource.text(), httpResource.arrayBuffer() ou encore httpResource.blob().

API rxResource et resource

Les API expérimentales rxResource et resource, introduites dans la version 19 d'Angular, ont été améliorées. Il est maintenant possible de définir une valeur par défaut qui sera utilisée comme valeur initiale de la ressource ou lorsque la ressource est dans un état idle, loading ou en erreur. Au lieu de la valeur undefined par défaut.

todos = resource<Todo[], { todoQuery: string }>({
    defaultValue: [{ id: 0, userId: 0, title: 'MA TODO PAR DÉFAUT', completed: true}],
    request: () => ({ todoQuery: this.todoQuery() }),
    loader: async ({ request, abortSignal }) => {
      const todos = await fetch(`${TODO_API_URL}?title_like=^${request.todoQuery}`, {
        signal: abortSignal
      });
      if (!todos.ok) {
        throw new Error(`Could not fetch : ${todos.url}`);
      }
      return await todos.json();
    }
  });

La fonction stream fait son apparition dans resource. Cette dernière va vous permettre de disposer des données de la resource en continu, par exemple via une connexion WebSocket. La resource est définie avec une option stream, au lieu d'une option loader, et va nous renvoyer une promesse de signal.

streamResource = resource<string | number, { startValue: number }>({
   request: this.request,
   stream: async ({ request, abortSignal }) => {

     const resultSignal = signal<StreamItem<number | string>>({
       value: 0
     });

     // Logique à implémenter, WebSocket connexion pour collecter et gérer les messages d’une conversation par exemple

     abortSignal.addEventListener('abort', () => {
       console.log('Abort');
     });

     return resultSignal;
  }
});

La valeur du signal doit TOUJOURS être renvoyée avec une valeur ou une propriété d'erreur :

export type StreamItem<T> = { value: T } | { error: unknown };

Lorsque la promesse est résolue, le chargeur peut continuer à mettre à jour ce signal au fil du temps, et la ressource mettra à jour sa valeur et son erreur chaque fois que l'élément du signal request changera. Et pour terminer abortSignal, il va gérer le nettoyage des ressources dans les Streaming Resources, comme les connexions WebSocket ou les EventSource. Celui-ci peut être déclenché dans trois cas :

• Destruction d'un composant
• Lors que la resource est arrêté manuellement
• Lorsque le signal request renvoie une nouvelle valeur

Template literals

Le compilateur Angular prend désormais en charge les templates de strings dans les templates. Cela permet d'utiliser des chaînes dynamiques directement dans les templates Angular :

<h1 [class]="`title-${color()}`">
  {{ `Hello ${world() | titlecase}!` }}
</h1>

Cette fonctionnalité améliore la lisibilité et la flexibilité des templates, tout en permettant l'utilisation de pipes dans les parties dynamiques.

Validateurs de formulaire

Les validateurs minLength, maxLength et required fonctionnent désormais avec des Set. Voici quelques exemples :

console.log(Validators.minLength(2)(new FormControl("S")));
// Affiche { minlength: { actualLength: 1, requiredLength: 2 } }

console.log(Validators.minLength(2)(new FormControl(["f"])));
// Affiche { minlength: { actualLength: 1, requiredLength: 2 } }

// En v19.2 👇
console.log(Validators.minLength(4)(new FormControl(new Set(["e", "i", "r"]))));
// Affiche { minlength: { actualLength: 3, requiredLength: 4 } }

Cette mise à jour élargit les possibilités de validation des formulaires, notamment pour les collections de données.

Migration vers des balises auto-fermantes

Il est désormais possible de convertir les éléments void automatiquement en balises auto-fermantes à l'aide de la commande suivante :

ng generate @angular/core:self-closing-tag

Avant migration :

<app-http-resource></app-http-resource>

Après migration :

<app-http-resource/>

Compatible Typescript 5.8

Angular 19.2 est désormais compatible avec TypeScript 5.8, offrant ainsi les dernières améliorations et fonctionnalités du langage. Pour en savoir plus, consultez les notes de version TypeScript 5.8.