# 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](https://angulardev.fr/les-nouveautes-en-angular-16-partie-1). 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 :
```typescript
...
"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.
```xml
```
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` :
```typescript
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` :
```typescript
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 :
```typescript
```
Par ceci :
```typescript
```
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](https://blog.angular.io/angular-v16-is-here-4d7a28ec680d)