Les nouveautés en Angular 16 (Partie 2)

Cet article est la suite de ce que nous avons eu à énoncer comme nouveautés dans la version 16 de Angular ici. Aujourd'hui, nous verrons ensemble également cinq (05) autres nouveautés liées à cette version.

esbuild dev-server

Il y a plus d'un an, la core team de Angular a annoncé un support expérimental pour esbuild dans la CLI de Angular afin de rendre les builds plus rapides. Aujourd'hui, avec Angular 16, le système de build basé sur esbuild entre en developer preview. Les premiers tests ont montré une amélioration de 72% dans les builds de production à froid.

Au lancement de la commande ng serve, nous pouvons maintenant utiliser Vite (créé par Evan You, le créateur de Vue.js) pour le serveur de développement, et esbuild pour nos builds de développement et de production.

La core team de Angular a mis l'accent sur le fait que la CLI de Angular s'appuie exclusivement sur Vite en tant que serveur de développement. Pour supporter la correspondance des sélecteurs, le compilateur Angular doit maintenir un graphe de dépendance entre nos composants, ce qui nécessite un modèle de compilation différent de celui de Vite.

Pour essayer Vite + esbuild il faut mettre à jour notre fichier angular.json en faisant ceci :

...
"architect": {
  "build": {                     /* Add the esbuild suffix  */
    "builder": "@angular-devkit/build-angular:browser-esbuild",
...

Angular Material Component

La core team de Angular a annoncé qu'au cours des deux derniers trimestres, qu'elle a travaillé en étroite collaboration avec l'équipe Material Design de Google pour fournir l'implémentation de la référence de Material 3 pour le Web avec Angular Material. Les composants Web MDC qui ont été livrés en 2022 ont révélé les bases de cet effort.

La prochaine étape consistera à lancer plus tard dans l'année une API de thématisation expressive basée sur des jetons qui permettra une personnalisation plus poussée des composants matériels d'Angular.

API to provide CSP nonce for inline stylesheets

Les éléments de style en ligne que Angular inclut dans le DOM pour les styles de composants violent la politique de sécurité du contenu par défaut style-src (CSP). Pour corriger cela, ils devraient soit contenir un attribut nonce, soit le serveur devrait inclure un hachage du contenu du style dans l'en-tête CSP. Même si Google n'a pas trouvé de vecteur d'attaque significatif pour cette vulnérabilité, de nombreuses entreprises appliquent une CSP stricte, ce qui a conduit à la popularité d'une demande de fonctionnalité sur le référentiel Angular.

Dans Angular 16, la core team a implémenté une nouvelle fonctionnalité couvrant le framework, Universal, CDK, Material, et le CLI qui nous permet de spécifier un attribut nonce pour les styles des composants inline. Il y a deux façons de spécifier le nonce . Soit en utilisant l'attribut ngCspNonce ou à travers le jeton d'injection CSP_NONCE.

L'attribut ngCspNonce est utile si vous avez accès à un modèle côté serveur qui peut ajouter le nonce à la fois à l'en-tête et dans le fichier index.html lors de la construction de la réponse.

<html>
<body>
  <app ngCspNonce="{% nonce %}"></app>  
</body>
</html>

L'autre façon de spécifier nonce est d'utiliser le jeton d'injection CSP_NONCE. Nous pouvons utiliser cette approche si nous avons accès à nonce au moment de l'exécution et que nous voulons mettre en cache le fichier index.html :

import {bootstrapApplication, CSP_NONCE} from '@angular/core';
import {AppComponent} from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [{
    provide: CSP_NONCE,
    useValue: globalThis.myRandomNonceValue
  }]
});

Configure zone in bootstrapApplication

Dans l'article précédent mentionné plus haut, nous avons vu que Signals a remplacé Zone.js. Toutefois, Zone.js n'a pas disparu de Angular.

D'après la core team de Angular, après la publication initiale des API autonomes (standalone), des développeurs ont exprimé leur souhait de pouvoir configurer Zone.js avec la nouvelle API bootstrapApplication.

Elle a donc ajouté une option pour le faire via provideZoneChangeDetection :

bootstrapApplication(App, {
  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
});

Balises de fermeture automatique

Il s'agit d'une fonctionnalité très demandée qui a été récemment mise en œuvre qui nous permet d'utiliser des balises de fermeture automatique pour les composants dans les templates Angular. Il s'agit d'une petite amélioration de l'expérience du développeur qui pourrait nous faire économiser de la saisie.

Nous pouvons désormais remplacer :

<my-component [prop]="props"></my-component>

Par ceci :

<my-component [prop]="props"/>

En somme, nous avons vu en deux parties l'essentiel sur les nouveautés liées à Angular 16. J'ai hâte de découvrir les merveilles que nous ferons avec cette nouvelle version.

Pour plus d'informations 👉 Angular v16 is here