Annonce d’Angular v20

• Stabilisation des principales API liées à la réactivité (reactivity), et publication de la fonctionnalité Zoneless en preview développeur
• Forte amélioration de l’expérience de débogage et de l’efficacité de développement, notamment grâce à l’intégration avec Chrome DevTools
• Prise en charge du développement GenAI, introduction de llms.txt et mise à disposition en open source de guides et d’exemples pour créer des applications IA
• Abandon officiel des anciens NgIf, NgFor, NgSwitch et recommandation de passer au control flow intégré
• Lancement d’un nouveau projet pour choisir la mascotte officielle d’Angular par vote de la communauté

---

Principales nouveautés d’Angular v20

• Ces dernières années, Angular a mené de grands changements avec la réactivité basée sur Signals, les applications Zoneless, etc.
• Avec Angular v20, l’accent est mis sur la stabilisation des fonctionnalités en cours et l’amélioration de l’expérience développeur

Stabilisation des fonctionnalités de réactivité (reactivity)

• Les API Signals, computed, input et view queries passent au stade stable
• Les API effect, linkedSignal et toSignal sont également stabilisées, permettant une gestion fiable de l’état asynchrone
• Des retours d’expérience de services à grande échelle comme Google et YouTube ont été partagés, avec notamment une amélioration de 35 % de la latence d’entrée

Nouvelles API expérimentales : resource, httpResource

• L’API resource facilite les requêtes asynchrones et le traitement de données en streaming en fonction des changements de signal
• httpResource apporte la prise en charge des requêtes HTTP basées sur les signaux, avec utilisation directe des résultats dans les signaux
• Divers schémas de données en streaming, comme WebSocket, peuvent être gérés simplement avec des signaux

Preview développeur de la fonctionnalité Zoneless

• En environnement SSR, les handlers par défaut de Node.js pour unhandledRejection et uncaughtException sont intégrés
• Côté client, l’écoute globale des erreurs est possible avec provideBrowserGlobalErrorListeners
• Un guide est fourni pour supprimer le polyfill zone.js dans angular.json et basculer vers le mode zoneless

Améliorations du rendu côté serveur

• L’hydratation incrémentale (incremental hydration) et les modes de rendu par route passent au stade stable
• Seule l’UI nécessaire est téléchargée/hydratée à l’entrée dans le viewport, ce qui minimise le trafic JavaScript
• Il est possible de configurer différents modes de rendu par route, comme SSR, CSR ou prerender

Amélioration de l’expérience développeur et de la productivité

• En collaboration avec Chrome DevTools, une piste de performance dédiée à Angular est proposée, permettant de suivre en temps réel le rendu interne du framework, les événements, la détection de changements, etc.
• Amélioration des API pour la création dynamique via createComponent, l’application de directives et les bindings basés sur les signaux
• Prise en charge dans les templates de l’opérateur exponentiel(**), de l’opérateur in et des template literals non tagués
• Renforcement des diagnostics pour des cas comme l’absence d’appel à @for trackFn, l’usage incorrect de nullish coalescing ou l’absence d’entrée dans une directive structurelle

Améliorations du guide de style et des host bindings

• Simplification et modernisation du guide de style sur la base de 10 ans de cas pratiques
• Les suffixes de noms de fichiers/classes ne sont plus générés par défaut, et l’objet host est recommandé à la place de HostBinding/HostListener
• L’option typeCheckHostBindings est ajoutée pour détecter en temps réel les erreurs de binding

Améliorations de DevTools/de l’environnement de test et Angular Material

• Des fonctions de débogage pour l’hydratation incrémentale et les deferrable views sont ajoutées à Angular DevTools
• Prise en charge de vitest en remplacement de Karma, avec introduction expérimentale du mode watch et des tests navigateur
• Amélioration de la qualité d’Angular Material : conformité des composants bouton à la spec M3, clarification de la terminologie, contrôle des animations/mouvements, etc.

Prise en charge de GenAI et des LLM

• Introduction de llms.txt pour permettre aux LLM d’apprendre le code Angular le plus récent, avec des exemples open source et des guides fournis
• Publication de guides d’intégration avec Genkit, Vertex AI, de live streams pratiques et de bonnes pratiques

Introduction du control flow intégré et abandon des directives structurelles

• Le control flow intégré introduit en v17 est supérieur sur de nombreux plans : intuitivité, sûreté de typage, performances, etc.
• *ngIf, *ngFor et *ngSwitch seront complètement supprimés en v22, avec un schematic de migration de code fourni

Projet de mascotte officielle Angular

• Présentation de candidats pour renforcer l’identité d’Angular et sa dimension communautaire, avec ouverture d’une RFC
• Parmi les propositions : une forme de bouclier inspirée du logo, un personnage d’Anglerfish, etc.
• La sélection finale se fera via les votes et retours de la communauté, avec possibilité de proposer un nom

Feuille de route à venir

• La v20 affine et stabilise de grandes fonctionnalités comme la réactivité, zoneless et l’hydratation incrémentale
• Les prochains grands projets incluent Selectorless, signal-forms, l’amélioration des tests unitaires, la mascotte, etc.
• L’orientation future sera définie en recueillant activement les avis de la communauté