Il y a six mois, nous avons franchi une �tape importante dans la simplicit� d'Angular et l'exp�rience des d�veloppeurs en sortant les API autonomes de l'aper�u pour d�veloppeurs. Aujourd'hui, nous sommes ravis de partager la poursuite de l'�lan Angular avec la plus grande version depuis le d�ploiement initial d'Angular, faisant des bonds importants dans la r�activit�, le rendu c�t� serveur et l'outillage. Tout cela s'accompagne de dizaines d'am�liorations de la qualit� de vie � travers les demandes de fonctionnalit�s, avec plus de 2 500 pouces combin�s sur GitHub !
Repenser la r�activit�
Dans le cadre de la version 16, nous sommes ravis de partager avec les d�veloppeurs un tout nouveau mod�le de r�activit� pour Angular, qui apporte des am�liorations significatives aux performances et � l'exp�rience des d�veloppeurs.
Il est enti�rement r�trocompatible et interop�rable avec le syst�me actuel, et permet :
- De meilleures performances d'ex�cution en r�duisant le nombre de calculs lors de la d�tection des changements. Une fois qu'Angular Signals sera compl�tement d�ploy�, nous nous attendons � des am�liorations significatives de la m�trique INP Core Web Vital pour les applications construites avec Signals.
- Apporte un mod�le mental plus simple pour la r�activit�, en clarifiant les d�pendances de la vue et le flux de donn�es � travers l'application.
- Permet une r�activit� fine, qui dans les prochaines versions nous permettra de v�rifier les changements uniquement dans les composants concern�s.
- Rend Zone.js optionnel dans les prochaines versions en utilisant des signaux pour notifier le framework lorsque le mod�le a chang�
- Fournit des propri�t�s calcul�es sans la p�nalit� de recalcul � chaque cycle de d�tection de changement
- Permet une meilleure interop�rabilit� avec RxJS en d�crivant un plan pour introduire des entr�es r�actives.
La discussion initiale sur GitHub a re�u 682 commentaires et depuis, nous avons partag� une s�rie de RFC ( Requests for comments, litt�ralement � demandes de commentaires �) qui en ont re�u plus de 1 000 !
Dans la v16, vous pouvez trouver une nouvelle biblioth�que de signaux qui fait partie de @angular/core et un package d'interop�rabilit� avec RxJS - @angular/core/rxjs-interop, l'int�gration compl�te des signaux dans le framework arrivera plus tard dans l'ann�e.
Angular Signals
La biblioth�que Angular signals vous permet de d�finir des valeurs r�actives et d'exprimer des d�pendances entre elles. Vous pouvez en savoir plus sur les propri�t�s de la biblioth�que dans la RFC correspondante. Voici un exemple simple d'utilisation avec Angular :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| @Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }} <button (click)="setName('John')">Click</button>
`,
})
export class App {
firstName = signal('Jane');
lastName = signal('Doe');
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
constructor() {
effect(() => console.log('Name changed:', this.fullName()));
}
setName(newName: string) {
this.firstName.set(newName);
} |
L'extrait ci-dessus cr�e une valeur calcul�e fullName, qui d�pend des signaux firstName et lastName. Nous d�clarons �galement un effet, dont le callback sera ex�cut� chaque fois que nous changerons la valeur de l'un des signaux qu'il lit - dans ce cas, fullName, ce qui signifie qu'il d�pend transitivement aussi de firstName et de lastName.
Lorsque nous fixons la valeur de firstName � "John", le navigateur se connecte � la console :
Interop�rabilit� RxJS
Vous pourrez facilement "lever" des signaux vers des observables gr�ce aux fonctions de @angular/core/rxjs-interop qui est en developer preview dans le cadre de la version v16 !
Voici comment convertir un signal en observable :
1
2
3
4
5
6
7
8
9
10
11
| import { toObservable, signal } from '@angular/core/rxjs-interop';
@Component({...})
export class App {
count = signal(0);
count$ = toObservable(this.count);
ngOnInit() {
this.count$.subscribe(() => ...);
}
} |
...et voici un exemple de conversion d'un observable en signal pour �viter d'utiliser le conduit asynchrone :
1
2
3
4
5
6
7
8
9
10
11
| import {toSignal} from '@angular/core/rxjs-interop';
@Component({
template: `
<li *ngFor="let row of data()"> {{ row }} </li>
`
})
export class App {
dataService = inject(DataService);
data = toSignal(this.dataService.data$, []);
} |
Les utilisateurs d'Angular souhaitent souvent compl�ter un flux lorsqu'un sujet connexe se termine. L'exemple suivant est assez courant :
1
2
3
4
5
6
7
| destroyed$ = new ReplaySubject<void>(1);
data$ = http.get('...').pipe(takeUntil(this.destroyed$));
ngOnDestroy() {
this.destroyed$.next();
} |
Nous introduisons un nouvel op�rateur RxJS appel� takeUntilDestroy, qui simplifie cet exemple comme suit :
data$ = http.get('…').pipe(takeUntilDestroyed());
Par d�faut, cet op�rateur injecte le contexte de nettoyage actuel. Par exemple, utilis� dans un composant, il utilisera la dur�e de vie du composant.
takeUntilDestroy est particuli�rement utile lorsque vous souhaitez lier le cycle de vie d'un Observable au cycle de vie d'un composant particulier.
Prochaines �tapes pour les signaux
Nous allons maintenant travailler sur les composants bas�s sur les signaux, qui disposent d'un ensemble simplifi� de crochets de cycle de vie et d'une autre fa�on, plus simple, de d�clarer les entr�es et les sorties. Nous travaillerons �galement sur un ensemble plus complet d'exemples et de documentation.
L'un des probl�mes les plus populaires dans le r�f�rentiel Angular est "Proposal : Input as Observable". Il y a quelques mois, nous avons r�pondu que nous voulions soutenir ce cas d'utilisation dans le cadre d'un effort plus important dans le framework. Nous sommes heureux de partager que plus tard cette ann�e, nous allons lancer une fonctionnalit� qui permettra des entr�es bas�es sur des signaux - vous serez en mesure de transformer les entr�es en observables via le paquet interop !
Rendu c�t� serveur et hydratation am�lior�s
D'apr�s notre enqu�te annuelle aupr�s des d�veloppeurs, le rendu c�t� serveur est la principale opportunit� d'am�lioration pour Angular. Au cours des deux derniers mois, nous avons collabor� avec l'�quipe Chrome Aurora pour am�liorer les performances et le DX de l'hydratation et du rendu c�t� serveur. Aujourd'hui, nous sommes heureux de partager l'aper�u d�veloppeur de l'hydratation non destructive de l'application compl�te !
Dans la nouvelle hydratation non-destructive de l'application compl�te, Angular ne redessine plus l'application � partir de z�ro. Au lieu de cela, le framework recherche les n�uds DOM existants tout en construisant des structures de donn�es internes et attache des r�cepteurs d'�v�nements � ces n�uds.
Les avantages sont les suivants :
- Pas de contenu vacillant sur une page pour les utilisateurs finaux
- Am�lioration de Web Core Vitals dans certains sc�narios
- Une architecture � l'�preuve du temps qui permet un chargement de code fin avec des primitives que nous livrerons plus tard dans l'ann�e. Actuellement, cela se traduit par une hydratation progressive des routes paresseuses.
- Int�gration facile avec les applications existantes, en seulement quelques lignes de code (voir l'extrait de code ci-dessous)
- Adoption progressive de l'hydratation avec l'attribut ngSkipHydration dans les templates pour les composants effectuant une manipulation manuelle du DOM.
Lors des premiers tests, nous avons constat� une am�lioration de 45% de la plus grande peinture Contentful avec une hydratation compl�te de l'application !
Certaines applications ont d�j� activ� l'hydratation en production et ont rapport� des am�liorations CWV :
Pour commencer, il suffit d'ajouter quelques lignes � votre fichier main.ts :
1
2
3
4
5
6
7
8
9
10
| import {
bootstrapApplication,
provideClientHydration,
} from '@angular/platform-browser';
...
bootstrapApplication(RootCmp, {
providers: [provideClientHydration()]
}); |
Nouvelles fonctionnalit�s de rendu c�t� serveur
Dans le cadre de la version 16, nous avons �galement mis � jour les sch�mas ng add pour Angular Universal, ce qui vous permet d'ajouter le rendu c�t� serveur aux projets utilisant des API autonomes. Nous avons �galement introduit la prise en charge d'une politique de s�curit� du contenu plus stricte pour les styles en ligne.
Prochaines �tapes de l'hydratation et du rendu c�t� serveur
Nous avons encore beaucoup � faire dans ce domaine et le travail effectu� dans la v16 n'est qu'un tremplin. Dans certains cas, il est possible de retarder le chargement du JavaScript qui n'est pas essentiel pour la page et d'hydrater les composants associ�s plus tard. Cette technique est connue sous le nom d'hydratation partielle et nous l'explorerons par la suite.
Depuis que Qwik a popularis� l'id�e de la resumabilit� � partir du framework ferm� Wiz de Google, nous avons re�u de nombreuses demandes pour cette fonctionnalit� dans Angular. La resumabilit� est d�finitivement sur notre radar, et nous travaillons en �troite collaboration avec l'�quipe Wiz pour explorer cet espace. Nous sommes prudents quant aux contraintes qui p�sent sur l'exp�rience des d�veloppeurs, nous �valuons les diff�rents compromis et nous vous tiendrons au courant de nos progr�s.
Vous pouvez en savoir plus sur nos plans futurs dans "What's next for server-side rendering in Angular".
Am�lioration de l'outillage pour les composants autonomes, les directives et les tuyaux
Angular est un framework utilis� par des millions de d�veloppeurs pour un grand nombre d'applications critiques et nous prenons les changements majeurs au s�rieux. Nous avons commenc� � explorer les API autonomes il y a des ann�es, en 2022, nous les avons publi�es en version developer preview. Apr�s plus d'un an de collecte de commentaires et d'it�ration sur les API, nous aimerions encourager une adoption encore plus large !
Pour aider les d�veloppeurs � faire passer leurs applications aux API autonomes, nous avons �labor� des sch�mas de migration et un guide de migration autonome. Une fois dans le r�pertoire de votre projet, ex�cutez :
ng generate @angular/core:standalone
Les sch�mas convertiront votre code, supprimeront les classes NgModules superflues et modifieront enfin l'amorce du projet pour utiliser des API autonomes.
Standalone ng new collection
Dans le cadre d'Angular v16, vous pouvez cr�er de nouveaux projets en tant que standalone d�s le d�part ! Pour essayer l'aper�u d�veloppeur des sch�mas autonomes, assurez-vous que vous �tes sur Angular CLI v16 et ex�cutez :
Vous obtiendrez un projet plus simple sans aucun NgModules. De plus, tous les g�n�rateurs du projet produiront des directives, des composants et des tuyaux autonomes !
Configurer Zone.js
Apr�s la sortie initiale des API autonomes, des d�veloppeurs nous ont dit qu'ils aimeraient pouvoir configurer Zone.js avec la nouvelle API `bootstrapApplication`.
Nous avons ajout� une option pour cela via provideZoneChangeDetection :
1
2
3
| bootstrapApplication(App, {
providers: [provideZoneChangeDetection({ eventCoalescing: true })]
}); |
Faire progresser l'outillage des d�veloppeurs
Partageons maintenant quelques points forts de l'interface de programmation Angular et du service linguistique.
Aper�u pour les d�veloppeurs du syst�me de construction bas� sur esbuild
Il y a plus d'un an, nous avons annonc� que nous travaillions sur la prise en charge exp�rimentale d'esbuild dans l'interface de gestion d'Angular afin d'acc�l�rer vos constructions. Aujourd'hui, nous sommes ravis de partager que dans la v16, notre syst�me de construction bas� sur esbuild entre dans l'aper�u pour les d�veloppeurs ! Les premiers tests ont montr� une am�lioration de 72 % dans les builds de production � froid.
Dans ng serve, nous utilisons maintenant Vite pour le serveur de d�veloppement, et esbuild alimente � la fois vos builds de d�veloppement et de production !
Nous tenons � souligner qu'Angular CLI 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 vos composants, ce qui n�cessite un mod�le de compilation diff�rent de celui de Vite.
Vous pouvez essayer Vite + esbuild en mettant � jour votre angular.json :
1
2
3
4
5
| ...
"architect": {
"build": { /* Add the esbuild suffix */
"builder": "@angular-devkit/build-angular:browser-esbuild",
... |
Ensuite, nous nous attaquerons � la prise en charge de l'i18n avant de sortir ce projet de l'aper�u pour d�veloppeurs.
De meilleurs tests unitaires avec Jest et Web Test Runner
D'apr�s les enqu�tes men�es aupr�s des d�veloppeurs d'Angular et de la communaut� JavaScript au sens large, Jest est l'un des frameworks de test et des runners de test les plus appr�ci�s. Nous avons re�u de nombreuses demandes de prise en charge de Jest, qui s'accompagne d'une complexit� r�duite puisqu'aucun navigateur r�el n'est requis.
Aujourd'hui, nous sommes heureux d'annoncer que nous introduisons le support exp�rimental de Jest. Dans une prochaine version, nous d�placerons �galement les projets Karma existants vers Web Test Runner pour continuer � supporter les tests unitaires bas�s sur le navigateur. Pour la majorit� des d�veloppeurs, il n'y aura pas de probl�me.
Vous pouvez exp�rimenter Jest dans de nouveaux projets en installant Jest avec npm install jest --save-dev et en mettant � jour votre fichier angular.json :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| {
"projects": {
"my-app": {
"architect": {
"test": {
"builder": "@angular-devkit/build-angular:jest",
"options": {
"tsConfig": "tsconfig.spec.json",
"polyfills": ["zone.js", "zone.js/testing"]
}
}
}
}
}
} |
Autocompl�tion des importations dans les mod�les
Combien de fois avez-vous utilis� un composant ou un tuyau dans un mod�le pour obtenir une erreur de la part de l'interface de programmation ou du service de langue, vous indiquant que vous n'avez pas import� l'impl�mentation correspondante ? Je parie qu'il y en a des tonnes !
Le service linguistique permet d�sormais l'importation automatique de composants et de tuyaux.
Gif montrant la fonctionnalit� d'auto-importation du service de langue Angular dans VSCode
Et ce n'est pas tout !
Dans la v16, nous activons �galement la prise en charge de TypeScript 5.0, avec la prise en charge des d�corateurs ECMAScript, la suppression de la surcharge de ngcc, l'ajout de la prise en charge des travailleurs de service et de l'app shell dans les applications autonomes, l'extension de la prise en charge de CSP dans la CLI, et bien plus encore !
Am�liorer l'exp�rience des d�veloppeurs
En plus des grandes initiatives sur lesquelles nous nous concentrons, nous travaillons �galement � apporter des fonctionnalit�s tr�s demand�es.
Entr�es requises
Depuis que nous avons introduit Angular en 2016, il n'a pas �t� possible d'obtenir une erreur de compilation si vous ne sp�cifiez pas une valeur pour une entr�e sp�cifique. Le changement n'ajoute aucune surcharge � l'ex�cution puisque le compilateur Angular effectue la v�rification au moment de la construction. Les d�veloppeurs n'ont cess� de demander cette fonctionnalit� au fil des ans et nous avons re�u une forte indication que cela sera tr�s pratique !
Dans la v16, vous pouvez maintenant marquer une entr�e comme requise :
1
2
3
4
| @Component(...)
export class App {
@Input({ required: true }) title: string = '';
} |
Transmission des donn�es du routeur en tant qu'entr�es de composants
L'exp�rience des d�veloppeurs du routeur a progress� rapidement. Une demande de fonctionnalit� populaire sur GitHub demande la possibilit� de lier les param�tres de la route aux entr�es du composant correspondant. Nous sommes heureux de vous annoncer que cette fonctionnalit� est d�sormais disponible dans le cadre de la version 16 !
Vous pouvez d�sormais passer les donn�es suivantes aux entr�es d'un composant de routage :
- Donn�es de l'itin�raire - r�solveurs et propri�t�s des donn�es
- Param�tres du chemin
- Param�tres de requ�te
Voici un exemple de la fa�on dont vous pouvez acc�der aux donn�es d'un r�solveur d'itin�raires :
1
2
3
4
5
6
7
8
9
10
11
12
13
| const routes = [
{
path: 'about',
loadComponent: import('./about'),
resolve: { contact: () => getContact() }
}
];
@Component(...)
export class About {
// The value of "contact" is passed to the contact input
@Input() contact?: string;
} |
Prise en charge de la CSP pour les styles en ligne
Les �l�ments de style en ligne qu'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 v16, nous avons impl�ment� une nouvelle fonctionnalit� couvrant le framework, Universal, CDK, Material, et le CLI qui vous permet de sp�cifier un attribut nonce pour les styles des composants qu'Angular inline. Il y a deux fa�ons de sp�cifier le nonce : 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 � l'index.html lors de la construction de la r�ponse.
1
2
3
4
5
| <html>
<body>
<app ngCspNonce="{% nonce %}"></app>
</body>
</html> |
L'autre fa�on de sp�cifier le nonce est d'utiliser le jeton d'injection CSP_NONCE. Utilisez cette approche si vous avez acc�s � nonce au moment de l'ex�cution et que vous voulez pouvoir mettre en cache le fichier index.html :
1
2
3
4
5
6
7
8
9
| import {bootstrapApplication, CSP_NONCE} from '@angular/core';
import {AppComponent} from './app/app.component';
bootstrapApplication(AppComponent, {
providers: [{
provide: CSP_NONCE,
useValue: globalThis.myRandomNonceValue
}]
}); |
Flexible ngOnDestroy
Les crochets de cycle de vie d'Angular fournissent beaucoup de puissance pour se brancher sur diff�rents moments de l'ex�cution de votre application. Au fil des ans, il a �t� possible d'offrir une plus grande flexibilit�, par exemple en donnant acc�s � OnDestroy en tant qu'observable.
Dans la v16, nous avons rendu OnDestroy injectable, ce qui permet la flexibilit� que les d�veloppeurs demandaient. Cette nouvelle fonctionnalit� vous permet d'injecter DestroyRef correspondant � un composant, une directive, un service ou un tuyau - et d'enregistrer le crochet du cycle de vie de OnDestroy. Le DestroyRef peut �tre inject� n'importe o� dans un contexte d'injection, y compris � l'ext�rieur de votre composant - dans ce cas, le hook onDestroy est ex�cut� lorsqu'un injecteur correspondant est d�truit. :
1
2
3
4
5
6
7
8
9
10
| import { Injectable, DestroyRef } from '@angular/core';
@Injectable(...)
export class AppService {
destroyRef = inject(DestroyRef);
destroy() {
this.destroyRef.onDestroy(() => /* cleanup */ );
}
} |
Balises auto-fermantes
Une fonctionnalit� tr�s demand�e que nous avons r�cemment mise en �uvre vous permet d'utiliser des balises de fermeture automatique pour les composants dans les mod�les Angular. Il s'agit d'une petite am�lioration de l'exp�rience du d�veloppeur qui pourrait vous faire �conomiser de la frappe !
Vous pouvez d�sormais remplacer :
<super-duper-long-component-name [prop]="someVar"></super-duper-long-component-name>
avec ceci :
<super-duper-long-component-name [prop]="someVar"/>
Des composants meilleurs et plus flexibles
Au cours des deux derniers trimestres, nous avons travaill� en �troite collaboration avec l'�quipe Material Design de Google pour fournir l'impl�mentation de r�f�rence de Material 3 pour le Web avec Angular Material. Les composants Web MDC que nous avons livr�s en 2022 ont jet� 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.
Nous vous rappelons que nous supprimerons les anciens composants non bas�s sur le MDC dans la v17. Assurez-vous de suivre notre guide de migration pour passer � la derni�re version.
Poursuite de notre initiative en mati�re d'accessibilit�
Conform�ment � la mission de Google, Angular vous permet de construire des applications web pour tout le monde ! C'est pourquoi nous investissons continuellement dans l'am�lioration de l'accessibilit� du CDK Angular et des composants Material.
Points forts de la contribution de la communaut�
Deux des fonctionnalit�s introduites par la communaut� que nous souhaitons mettre en avant sont :
- Les diagnostics �tendus pour une utilisation correcte de ngSkipHydration par Matthieu Riegler.
- L'introduction de provideServiceWorker pour permettre l'utilisation du service worker d'Angular sans NgModules par Julien Saguet.
Plus de 175 personnes ont contribu� � la v16 sur GitHub et des milliers d'autres ont contribu� via des articles de blog, des conf�rences, des podcasts, des vid�os, des commentaires sur les RFC de r�activit�, etc.
Nous tenons � remercier chaleureusement tous ceux qui nous ont aid�s � rendre cette version sp�ciale.
Continuons ensemble sur notre lanc�e !
La version 16 est un tremplin pour les am�liorations futures de la r�activit� et du rendu c�t� serveur d'Angular au cours de l'ann�e prochaine. Nous allons faire avancer le Web en innovant dans l'exp�rience des d�veloppeurs, la performance, tout en vous permettant de construire pour tout le monde !
Vous pouvez faire partie de l'�lan Angular et nous aider � fa�onner l'avenir du framework en partageant vos id�es dans les RFC � venir, les sondages ou les m�dias sociaux.
Merci de faire partie de la communaut� Angular. Nous avons h�te que vous essayiez ces fonctionnalit�s !
La version 16 d'Angular est disponible
Quel est votre avis sur le sujet ?
R�pondre avec citation
Partager