Angular version 20

L'écosystème JavaScript est en perpétuelle effervescence, et Angular, le framework TypeScript de Google, ne fait pas exception. Après des années de transformations majeures, notamment avec l'introduction des Signaux pour la réactivité et la promesse des applications zoneless, l'équipe Angular continue sur sa lancée.

La version 20 vient améliorer de nombreuses fonctionnalités en cours de développement, stabiliser des APIs clés et introduire des améliorations significatives pour l'expérience développeur (DX) et les performances. Accrochez-vous, car Angular version 20 est bien plus qu'une simple mise à jour ; c'est une affirmation de la vision moderne et robuste du framework, une étape consolidant les fondations pour des applications web encore plus performantes et agréables à développer.

La révolution réactive continue : les signaux atteignent leur pleine maturité

La refonte du modèle de réactivité d'Angular, initiée avec les signaux en version 16, a été un véritable tournant.

Ces primitives réactives, inspirées par des concepts éprouvés dans d'autres écosystèmes, offrent une gestion plus fine et plus performante des changements d'état.

Adoptés massivement, y compris par des géants comme YouTube qui ont constaté des améliorations notables de latence dans leurs applications Living Room (jusqu'à 35% d'amélioration de la latence d'entrée en utilisant les Signaux avec Wiz), les signaux sont désormais au cœur de la stratégie d'Angular et influencent même les discussions au sein du TC39 pour une potentielle standardisation en JavaScript.

Avec la version 20, plusieurs APIs de réactivité cruciales passent au statut stable, signifiant qu'elles sont prêtes pour une utilisation en production avec un support à long terme :

signal, computed, input (basé sur les signaux) et les requêtes de vue (view queries) basées sur les signaux étaient déjà stabilisés, fournissant la base de ce nouveau paradigme.
Ils sont rejoints par :
- effect : permet d'exécuter des effets de bord (comme des appels API, des logs, ou des manipulations du DOM non gérées par Angular) en réaction aux changements de valeur d'un ou plusieurs signaux. La stabilité de effect est une étape majeure, car elle offre un moyen propre et prédictible d'intégrer la logique réactive avec le monde extérieur.
- linkedSignal : une API plus avancée pour créer des signaux dont la valeur dépend d'autres signaux, mais avec la capacité de référencer la valeur précédente du signal lors de la mise à jour. Cela ouvre la porte à des scénarios de gestion d'état plus complexes.
- toSignal : un utilitaire précieux pour intégrer l'écosystème existant basé sur les Observables (RxJS) avec le nouveau monde des Signaux. Il permet de convertir facilement un Observable en un Signal, facilitant une transition progressive ou une coexistence des deux approches.

L'équipe Angular ne s'arrête pas là et continue d'explorer la gestion de l'état asynchrone avec des APIs expérimentales prometteuses, conçues pour s'intégrer nativement avec les Signaux :

L'API httpResource : s'appuyant sur les patrons établis par resource, cette API expérimentale est spécifiquement conçue pour simplifier les requêtes HTTP. Elle offre une approche réactive basée sur les Signaux pour effectuer des appels GET. Un avantage notable est son utilisation de HttpClient sous le capot, ce qui signifie qu'elle bénéficie de toutes les fonctionnalités de HttpClient, y compris les intercepteurs (pour la journalisation, l'authentification, la mise en cache, etc.), rendant son intégration dans les applications existantes plus transparente.

@Component({
  template: `
    @if (userResource.isLoading()) {
      <p>Chargement du profil utilisateur...</p>
    } @else if (userResource.error()) {
      <p>Erreur: {{ userResource.error()?.message }}</p>
    } @else if (userResource.value(); as user) {
      <h1>{{ user.name }}</h1>
      <p>{{ user.email }}</p>
    }
  `
})
class UserProfile {
  userId = signal(1); // Le signal qui déclenche la requête
  // httpResource prend une fonction qui retourne l'URL.
  // La requête est refaite chaque fois que userId change.
  userResource = httpResource<User>(() =>
    `https://api.example.com/v1/users/${this.userId()}`
  );
}
// N'oubliez pas de fournir HttpClient et les intercepteurs si nécessaire :
// bootstrapApplication(AppComponent, {providers: [
//   provideHttpClient(withInterceptors([loggingInterceptor]))
// ]});

L'API resource : introduite en v19 et affinée en v20, elle permet d'initier une action asynchrone (typiquement un appel réseau) lorsqu'un signal source change, et d'exposer le résultat de cette action (données, état de chargement, erreur) sous forme d'un signal. Elle gère également le streaming de ressources, ce qui est particulièrement utile pour des cas d'usage comme les WebSockets ou toute autre source de données qui émet plusieurs valeurs au fil du temps. La gestion de l' AbortSignal est intégrée, permettant d'annuler les requêtes en cours si le signal source change à nouveau avant la fin de la requête précédente.

// Exemple avec l'API resource pour un fetch simple
const userId: Signal<string> = getUserIdSignal(); // Supposons que getUserIdSignal retourne un Signal<string>
const userResource = resource({
  params: () => ({ id: userId() }), // Note: 'query' a été renommé 'params' pour plus de clarté
  loader: async ({ request, abortSignal }): Promise<User> => {
    // La fonction loader est asynchrone et retourne une promesse
    // fetch annule les requêtes HTTP en attente lorsque l'AbortSignal donné
    // indique que la requête a été annulée.
    const response = await fetch(`https://api.example.com/users/${request.id}`, { signal: abortSignal });
    if (!response.ok) {
      throw new Error(`Erreur lors de la récupération de l'utilisateur ${request.id}`);
    }
    return response.json();
  },
});

// Utilisation dans un template :
// {{ userResource.state() === 'loading' ? 'Chargement...' : '' }}
// {{ userResource.state() === 'error' ? userResource.error() : '' }}
// {{ userResource.state() === 'resolved' ? userResource.value()?.name : '' }}

Vers un futur "zoneless" : la developer preview est lancée !

L'un des chantiers les plus ambitieux et les plus attendus par la communauté Angular est la possibilité de se passer de Zone.js. Cette bibliothèque, bien qu'utile pour la détection de changement automatique, a un coût en termes de performance et de complexité. Angular v20 marque une étape cruciale en propulsant les applications "zoneless" en Developer Preview. Cette avancée majeure promet de transformer radicalement la manière dont Angular gère la réactivité et les mises à jour de l'interface utilisateur.

Les bénéfices attendus sont multiples :

Une réduction significative de la taille du bundle de l'application, car Zone.js est un polyfill relativement conséquent.
Des performances améliorées, notamment au démarrage de l'application et lors des interactions, grâce à l'élimination des patchs globaux sur les APIs asynchrones du navigateur et des cycles de détection de changement potentiellement inutiles. La détection de changement deviendra plus granulaire et explicite, pilotée par les Signaux.
Un débogage simplifié avec des traces d'appels (stack traces) plus claires et plus courtes, non polluées par les appels internes de Zone.js.
Une meilleure interopérabilité avec les bibliothèques et les APIs natives du navigateur qui pourraient être affectées par le patching de Zone.js.

Des progrès significatifs ont été réalisés pour rendre ce mode viable, notamment pour le rendu côté serveur (SSR) et la gestion des erreurs, deux aspects où zone.js jouait un rôle important :

En SSR Node.js, des gestionnaires par défaut pour unhandledRejection (promesses non gérées) et uncaughtException (exceptions non capturées) préviennent désormais les crashs du serveur, assurant une meilleure robustesse.
Côté client, la fonction provideBrowserGlobalErrorListeners() peut être ajoutée aux fournisseurs de l'application pour une gestion centralisée et standardisée des erreurs globales, remplaçant une partie du rôle de zone.js dans la capture d'erreurs.

Pour commencer à expérimenter avec une application Zoneless dès aujourd'hui : supprimez l'import et le polyfill de zone.js de votre fichier polyfills.ts (ou angular.json selon la configuration de votre projet).

Mettez à jour la configuration de bootstrap de votre application en incluant provideZonelessChangeDetection() et, pour une meilleure gestion des erreurs, provideBrowserGlobalErrorListeners() :

import { bootstrapApplication } from '@angular/platform-browser';
import { provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
// ... autres imports ...

bootstrapApplication(AppComponent, {
  providers: [
    provideZonelessChangeDetection(), // Active le mode Zoneless
    provideBrowserGlobalErrorListeners(), // Optionnel mais recommandé
    provideRouter(routes)
    // ... autres fournisseurs ...
  ]
});

La transition vers un mode Zoneless implique une compréhension plus approfondie de la manière dont Angular détecte les changements. Les développeurs devront s'appuyer davantage sur les Signaux et d'autres mécanismes explicites pour notifier Angular quand une mise à jour de la vue est nécessaire. La documentation officielle d'Angular fournit des guides détaillés sur les avantages, les implications et les étapes de transition vers ce nouveau mode de fonctionnement prometteur.

Expérience développeur (DX) et outillage : toujours plus loin

Angular v20 met un accent particulier sur l'amélioration continue de l'expérience des développeurs (DX). Une DX soignée se traduit par une productivité accrue, moins de frustration et un code de meilleure qualité. Plusieurs nouveautés et améliorations vont dans ce sens :

Intégration approfondie avec Chrome DevTools : en collaboration étroite avec l'équipe Chrome DevTools, Angular offre désormais des données de profilage spécifiques directement dans l'onglet "Performance" des outils de développement de Chrome. Cela permet de visualiser le rendu des composants, les cycles de détection de changement, et l'exécution des écouteurs d'événements au sein de la même timeline que les autres métriques de performance du navigateur (parsing JS, layout, paint). Cette intégration facilite grandement l'identification des goulots d'étranglement spécifiques à Angular dans le contexte global de l'application. Pour l'activer, il suffit d'exécuter la commande ng.enableProfiling() dans la console des DevTools. Les entrées Angular sont colorées différemment pour distinguer le code applicatif du code généré par le compilateur.
Améliorations d'Angular DevTools : l'extension de navigateur Angular DevTools continue de s'enrichir. Elle permet maintenant de prévisualiser l'hydratation incrémentale et les vues différées (@defer). Des icônes indiquent clairement si un composant ou une section différée a déjà été hydratée ou chargée, simplifiant le débogage de ces fonctionnalités de performance avancées. On peut inspecter les triggers des blocs @defer et le contenu qu'ils chargent.
Guide de style modernisé : le guide de style officiel d'Angular (angular.dev/style-guide) a été substantiellement revu pour le moderniser, le simplifier et le concentrer sur les pratiques les plus impactantes. Une des évolutions notables est que les suffixes de fichiers (.component.ts, .directive.ts, .pipe.ts, .service.ts) sont désormais optionnels par défaut pour les nouveaux projets générés avec la CLI. Cette décision vise à encourager des noms de fichiers et de classes plus intentionnels et moins verbeux, réduisant le boilerplate. Par exemple, un composant UserCard serait dans un fichier user-card.ts plutôt que user-card.component.ts. Les projets existants conserveront la génération des suffixes via une mise à jour de leur angular.json lors de ng update, mais peuvent opter pour la nouvelle convention.
Améliorations des host bindings : historiquement, @HostBinding et @HostListener étaient souvent préférés à l'objet host dans les métadonnées des directives/composants pour leur meilleur support par l'éditeur. Pour combler cet écart et encourager l'utilisation de l'objet host (qui centralise la configuration de l'hôte), la v20 introduit la vérification de type et un meilleur support du service de langage (autocomplétion, refactoring) pour les expressions de host bindings et listeners définies dans l'objet host. Cela permet de détecter les erreurs de typage ou les références incorrectes à la compilation plutôt qu'à l'exécution. Activez cette fonctionnalité avec typeCheckHostBindings: true dans la section angularCompilerOptions de votre tsconfig.json. Elle sera activée par défaut dans Angular v21.
Syntaxe de template étendue : pour rendre les templates Angular encore plus expressifs et proches de JavaScript, de nouveaux opérateurs sont supportés :
- Support des littéraux de gabarit non tagués (untagged template literals) :

<div [class]="`layout col-colWidth theme-${themeSignal()}`"></div>

Cela simplifie grandement la construction de chaînes de caractères dynamiques.

Support de l'opérateur d'exponentiation ** : {{ base ** exposant }} (par exemple, {{ 2 ** 3 }} affichera 8).
Support de l'opérateur in pour vérifier la présence d'une propriété dans un objet : {{ 'name' in person }}.
Support de l'opérateur void pour ignorer explicitement la valeur de retour d'un écouteur d'événement, ce qui peut être utile pour éviter des comportements par défaut non désirés si un handler retourne false.

Diagnostics étendus : le compilateur Angular devient plus intelligent pour vous aider à éviter des erreurs courantes. De nouvelles vérifications statiques (diagnostics) ont été ajoutées, par exemple pour détecter la coalescence des valeurs nulles (??) invalide, la détection d'imports manquants pour les directives structurelles (comme *ngIf ou *ngFor si vous utilisez encore les anciennes directives), et un avertissement très utile lorsque vous oubliez d'invoquer la fonction track passée à la nouvelle boucle @for (par exemple, @for (item of items; track trackFn) au lieu de @for (item of items; track trackFn(item))).
Hot Module Replacement (HMR) des templates par défaut : le HMR pour les templates est maintenant activé par défaut en mode développement. Cela signifie que les modifications apportées à vos templates HTML sont reflétées quasi instantanément dans le navigateur sans nécessiter un rechargement complet de la page, préservant l'état de l'application et accélérant significativement le cycle de développement itératif.
Support expérimental de Vitest : avec la dépréciation annoncée de Karma comme exécuteur de tests par défaut, l'équipe Angular explore activement des alternatives modernes. La CLI Angular v20 introduit un support expérimental pour Vitest. Vitest est un exécuteur de tests de nouvelle génération, basé sur Vite, connu pour sa rapidité et son expérience développeur agréable. Ce support inclut le mode "watch" et les tests navigateur, offrant une alternative prometteuse pour l'avenir des tests unitaires et d'intégration dans Angular.
Annulation de navigation du routeur : une nouvelle méthode Router.getCurrentNavigation()?.abort() permet d'annuler programmatiquement une navigation en cours. Cela peut être utile dans des scénarios complexes, par exemple si une condition change pendant la résolution d'une route.
Redirections asynchrones du routeur : la propriété redirectTo dans la configuration des routes peut maintenant retourner une Promise<string | UrlTree> ou un Observable<string | UrlTree>. Cela permet une logique de redirection plus dynamique, où la destination de la redirection peut être déterminée de manière asynchrone (par exemple, après avoir vérifié des permissions utilisateur ou récupéré des données).

Améliorations de createComponent : la fonction createComponent de @angular/core, utilisée pour instancier dynamiquement des composants (par exemple, pour des modales, des popups, ou des systèmes de plugins), gagne considérablement en puissance et en flexibilité. Il est désormais possible d'appliquer des directives et de spécifier des bindings (entrées, sorties, liaisons bidirectionnelles) directement lors de l'appel à createComponent, de manière similaire à ce que l'on ferait dans un template.

import { createComponent, signal, inputBinding, outputBinding, twoWayBinding } from '@angular/core';
// ... import MyDialog, FocusTrap, HasColor ...

const canCloseDialog = signal(false);
const dialogTitle = signal('Titre de ma dialogue');

const componentRef = createComponent(MyDialog, {
  // environmentInjector: this.injector, // Nécessaire pour l'injection de dépendances
  bindings: [
    inputBinding('canClose', canCloseDialog), // Lie le signal à l'input 'canClose'
    outputBinding<DialogResult>('onClose', (result: DialogResult) => console.log('Dialogue fermée avec:', result)),
    twoWayBinding('title', dialogTitle), // Liaison bidirectionnelle pour l'input 'title' et l'output 'titleChange'
  ],
  directives: [
    FocusTrap, // Appliquer la directive FocusTrap au composant MyDialog
    {
      type: HasColor, // Appliquer la directive HasColor
      bindings: [inputBinding('color', () => 'blue')] // Et lui passer un input
    }
  ]
});
// componentRef.instance contient l'instance de MyDialog

Rendu côté serveur (SSR) et hydratation : stabilité et performance accrues

Le rendu côté serveur (SSR) est crucial pour améliorer le référencement (SEO) et le temps de premier affichage perçu (FCP/LCP). Angular continue d'investir massivement dans ce domaine, et la v20 apporte la stabilité à des fonctionnalités clés :

Configuration du mode de rendu par route (Stable) : si différentes routes ou sections de votre application ont des besoins de rendu distincts (par exemple, des pages marketing nécessitant un SSR complet pour le SEO, un tableau de bord utilisateur bénéficiant d'un rendu côté client (CSR) après authentification, et des pages produits pouvant être pré-rendues (SSG) au moment du build), vous pouvez désormais les configurer de manière stable et granulaire. Cela se fait au niveau de la configuration des routes serveur.

// Dans votre configuration de routes côté serveur
export const routeConfig: ServerRoute[] = [
  { path: '/', mode: RenderMode.SSR }, // Page d'accueil en SSR
  { path: '/blog/:slug', mode: RenderMode.SSR }, // Articles de blog en SSR
  { path: '/app/dashboard', mode: RenderMode.CSR }, // Dashboard en CSR
  {
    path: '/products/:id',
    mode: RenderMode.Prerender, // Pages produits pré-rendues
    async getPrerenderParams(): Promise<Array<{id: string}>> {
      // Logique pour récupérer tous les IDs de produits à pré-rendre
      const productService = inject(ProductService);
      const productIds = await productService.getAllProductIds(); // ex: ["1", "2", "3"]
      return productIds.map(id => ({ id })); // 'id' correspond au paramètre :id dans le chemin
    }
  },
  { path: '/legal', mode: RenderMode.Prerender } // Pages statiques en pré-rendu simple
];

Cette flexibilité permet d'optimiser chaque partie de l'application pour la meilleure performance et expérience utilisateur possible.

Hydratation incrémentale (Stable) : cette fonctionnalité, introduite en preview précédemment, est désormais stable. L'hydratation incrémentale améliore considérablement les temps de chargement initiaux et l'interactivité des applications SSR. Au lieu d'hydrater (rendre interactif côté client) l'ensemble de la page en une seule fois, Angular peut désormais hydrater des portions de la page de manière progressive, uniquement lorsque c'est nécessaire. Ceci est souvent piloté par les blocs @defer. Par exemple, un composant lourd dans le pied de page ou une section "commentaires" peut être hydraté uniquement lorsqu'il entre dans le viewport de l'utilisateur. Cela réduit la quantité de JavaScript à exécuter initialement, améliorant les Core Web Vitals. Pour l'activer, il faut utiliser provideClientHydration(withIncrementalHydration()) dans la configuration de l'application.

@defer (hydrate on viewport; prefetch on idle) {
  <heavy-comments-section/>
} @placeholder (minimum 500ms) {
  <app-comments-skeleton/>
} @loading (minimum 1s; after 200ms) {
  <app-spinner text="Chargement des commentaires..."/>
}

L'utilisation de prefetch on idle permet de charger le code du composant lorsque le navigateur est inactif, anticipant l'interaction de l'utilisateur.

Angular Material : alignement sur Material 3 et améliorations

L'équipe Angular Material continue de faire évoluer sa bibliothèque de composants UI pour offrir une expérience utilisateur moderne et cohérente, tout en améliorant l'expérience des développeurs.

Alignement avec la spécification Material 3 (M3) : Material 3 est la dernière évolution du système de design de Google, apportant des styles visuels rafraîchis, une meilleure prise en charge de la personnalisation (couleurs dynamiques, thèmes) et des améliorations d'accessibilité. Angular Material s'aligne progressivement sur M3 :
- Implémentation du bouton "tonal", une variante de bouton avec une emphase modérée, idéale pour les actions secondaires.
- Terminologie des APIs et des options de composants mise à jour pour correspondre à celle de M3, facilitant la compréhension pour les designers et développeurs familiers avec le système.
- Possibilité de définir l'apparence par défaut des boutons au niveau du thème, pour une cohérence à l'échelle de l'application.
- Introduction du sélecteur matIconButton pour les boutons icônes, pour une meilleure cohérence avec les autres types de boutons (mat-button, mat-raised-button, etc.).
Améliorations de la qualité de vie (QoL) pour les développeurs :
- Nouvelle propriété closePredicate pour les dialogues (MatDialog). Elle permet de fournir une fonction qui détermine si un dialogue peut être fermé, offrant un contrôle plus fin sur le comportement de fermeture (par exemple, pour empêcher la fermeture si un formulaire a des modifications non sauvegardées).
- Nouvelles APIs d'overlay (utilisées par les menus, dialogues, tooltips, etc.) conçues pour un meilleur tree-shaking. Cela signifie que si vous n'utilisez pas certaines fonctionnalités d'overlay, leur code ne sera pas inclus dans le bundle final, réduisant sa taille.
- Gestion automatique de la préférence utilisateur prefers-reduced-motion pour les animations. Les animations des composants Material seront réduites ou désactivées si l'utilisateur a activé cette option dans son système d'exploitation, améliorant l'accessibilité.
- Nouveau token d'injection (DI token) pour désactiver globalement ou localement les animations des composants Material, utile pour les tests ou pour des contextes spécifiques.
- Les composants MatButton (pour <button mat-button>) et MatAnchor (pour <a mat-button>) sont désormais combinés sous le même module d'import (MatButtonModule). Cela simplifie les imports, car les développeurs n'ont plus à se soucier d'importer deux modules distincts pour des styles de boutons similaires appliqués à des éléments HTML différents.

Cap sur l'IA générative (GenAI)

L'intelligence artificielle générative transforme de nombreux domaines, y compris le développement logiciel. Angular prend des mesures proactives pour faciliter le développement d'applications intégrant des fonctionnalités de GenAI et pour s'assurer que les outils d'IA eux-mêmes peuvent mieux comprendre et générer du code Angular moderne.

Un fichier llms.txt est désormais maintenu dans le dépôt GitHub d'Angular. Ce fichier, similaire à un robots.txt mais destiné aux grands modèles de langage (LLM), vise à guider ces modèles vers la documentation officielle la plus récente, les bonnes pratiques et les exemples de code utilisant les dernières fonctionnalités d'Angular (comme les composants standalone, les Signaux, le nouveau flux de contrôle). L'objectif est d'améliorer la qualité et la pertinence du code Angular généré par les IA, en évitant qu'elles ne proposent des solutions basées sur des patrons obsolètes.
Des guides, des tutoriels et des vidéos sont activement produits et mis à disposition sur le site officiel angular.dev/ai. Ces ressources ont pour but d'accompagner les développeurs Angular dans la création d'applications intégrant de l'IA générative. Elles présentent des exemples concrets et des bonnes pratiques pour utiliser des outils et des plateformes comme Genkit (un framework open-source de Google pour construire des applications GenAI) et Vertex AI (la plateforme d'IA/ML unifiée de Google Cloud) au sein d'applications Angular. Cela inclut des sujets comme l'appel d'APIs de modèles de langage, la gestion des flux de données avec les LLM, et l'intégration de fonctionnalités d'IA dans l'interface utilisateur.

Ces initiatives montrent l'engagement d'Angular à rester à la pointe de l'innovation et à fournir aux développeurs les outils et les connaissances nécessaires pour exploiter le potentiel de l'IA générative.

Évolutions et dépréciations importantes

Chaque version majeure d'Angular apporte son lot d'évolutions, et la v20 ne déroge pas à la règle, avec des changements visant à moderniser le framework et à préparer le terrain pour l'avenir.

Dépréciation des directives de flux de contrôle structurel (*ngIf, *ngFor, *ngSwitch) : Suite à l'introduction et à l'adoption massive du nouveau flux de contrôle intégré (@if, @for, @switch, @defer) en v17, les anciennes directives structurelles sont désormais officiellement dépréciées. Le nouveau flux de contrôle offre une syntaxe plus intuitive et plus proche de JavaScript, ne nécessite pas d'imports de modules spécifiques (comme CommonModule), améliore les performances grâce à un algorithme de diffing optimisé, et offre une meilleure inférence de type (type narrowing). La dépréciation signifie que bien qu'elles fonctionnent encore, elles généreront des avertissements et leur suppression est envisagée pour la version 22 (soit environ un an après la v20), conformément à la politique de dépréciation d'Angular. Un schéma de migration automatique (ng generate @angular/core:control-flow) est disponible pour faciliter la transition des projets existants vers la nouvelle syntaxe.
Prérequis techniques mis à jour : pour bénéficier des dernières fonctionnalités de TypeScript et de Node.js (en termes de performance, sécurité et APIs), Angular v20 requiert désormais TypeScript v5.8 (qui était déjà supporté optionnellement depuis Angular v19.2) et Node.js v20. Les versions antérieures de Node.js (notamment Node 18) ne sont plus supportées. Il est crucial de s'assurer que l'environnement de développement et de build respecte ces nouveaux prérequis.
Renommage d'API de rendu et de test :
- L'API afterRender(), utilisée pour exécuter du code après chaque rendu du composant, a été renommée en afterEveryRender() pour plus de clarté sur sa sémantique et est maintenant stable.
- Dans le contexte des tests, TestBed.flushEffects(), qui avait été introduit pour déclencher manuellement les effect() en attente, est déprécié. Il est recommandé d'utiliser TestBed.tick() à la place. TestBed.tick() simule le passage du temps et exécute l'ensemble du processus de synchronisation de la détection de changement, y compris les effets, d'une manière plus fidèle au comportement réel de l'application.

Ces changements, bien que pouvant nécessiter des ajustements dans les projets existants, visent à améliorer la cohérence, la performance et la maintenabilité du framework et des applications construites avec.

Conclusion : la version 20 d'Angular, une étape clé vers l'avenir

Angular 20 n'est pas une révolution disruptive en soi, mais plutôt une consolidation majeure et réfléchie des avancées significatives des versions précédentes. En stabilisant des fonctionnalités clés autour des Signaux et du rendu côté serveur, en améliorant drastiquement l'expérience développeur avec des outils plus performants, une syntaxe affinée et des diagnostics plus précis, et en ouvrant de manière plus concrète la voie à un futur "Zoneless", Angular confirme sa position de framework mature, performant et résolument tourné vers l'avenir du développement web.

Les efforts continus pour simplifier le guide de style, pour intégrer les considérations liées à l'IA générative, et pour renforcer l'engagement avec sa communauté dynamique (notamment via des initiatives comme la création d'une mascotte officielle) témoignent d'une équipe à l'écoute, pragmatique et déterminée à faire d'Angular une solution de choix, pérenne et agréable pour construire les applications web complexes et performantes de nouvelle génération.

Il est temps pour les équipes de développement d'envisager la mise à jour de leurs projets vers Angular v20, d'explorer ces nombreuses nouveautés et d'en tirer parti pour créer des expériences utilisateur encore meilleures. L'aventure Angular continue, et elle s'annonce plus réactive, plus productive et plus passionnante que jamais.

Suivez notre formation Angular à jour dès aujourd'hui !