Nouveautés d'Angular 20 (28 mai 2025)

Les dernières années ont été transformatrices pour Angular, avec l'introduction de grandes avancées comme la réactivité via les Signals et la puissance des applications zoneless (sans Zone.js). Les développeurs d'Angular espèrent que ces fonctionnalités ont aidé la communauté Angular à créer la prochaine génération d'applications web, alliant rapidité de mise sur le marché et performances robustes.

Et ce n'est que le début ! Angular v20 est la dernière version où les développeurs d'Angular ont passé d'innombrables heures à peaufiner certaines des fonctionnalités en cours de développement pour l'expérience développeur solide comme le roc que vous méritez.

Voici quelques points saillants :

Stabilisation d'API telles que effect, linkedSignal, toSignal, l'hydratation incrémentale, la configuration du mode de rendu au niveau des routes et promotion de zoneless en aperçu développeur

Amélioration du débogage avec Angular DevTools et partenariat avec Chrome pour des rapports Angular personnalisés directement dans Chrome DevTools

Peaufinage de l'expérience développeur avec des mises à jour du guide de style, la vérification de type et le support du service de langage pour les liaisons d'hôte, le support des expressions de littéraux de template non étiquetés dans les templates, le remplacement de module à chaud de template par défaut, et plus encore.

Avancées dans le développement GenAI avec llms.txt et des guides et vidéos angular.dev pour construire des applications d'IA générative

Lancement d'une demande de commentaires pour une mascotte officielle pour Angular

Promotion des fonctionnalités de réactivité vers stable

Les développeurs d'Angular ont passé les trois dernières années à repenser le modèle de réactivité d'Angular pour le rendre plus robuste et pérenne. Dans Angular v16, ils ont livré un aperçu développeur d'Angular Signals et depuis lors, ils ont obtenu une large adoption à l'intérieur et à l'extérieur de Google.

YouTube a partagé sur scène comment l'utilisation d'Angular Signals avec Wiz leur a permis d'améliorer la latence d'entrée dans Living Room de 35%. Entre-temps, TC39 a lancé une investigation pour introduire les Signals dans le langage JavaScript avec une implémentation de référence basée sur Angular Signals.

Après avoir collecté les retours des RFC et itéré sur l'implémentation, les développeurs d'Angular ont promu les API signal, computed, input et view queries vers stable. Aujourd'hui, ils annoncent effect, linkedSignal et toSignal comme stables également.

Nouvelles API expérimentales

Pour s'attaquer à la gestion de l'état asynchrone avec Angular, dans v19 les développeurs d'Angular ont développé l'API resource. Depuis lors, ils ont introduit le streaming de ressources et créé une nouvelle API appelée httpResource qui vous permet de faire des requêtes HTTP avec une API réactive basée sur les Signals. Ces deux API sont disponibles dans v20 en tant qu'expérimentales.

L'API resource vous permet d'initier une action asynchrone quand un signal change et d'exposer le résultat de cette action comme un signal :

const userId: Signal<string> = getUserId();
const userResource = resource({
  params: () => ({id: userId()}),
  loader: ({request, abortSignal}): Promise<User> => {
    // fetch annule toutes les requêtes HTTP en cours quand l'AbortSignal donné
    // indique que la requête a été annulée.
    return fetch(`users/${request.id}`, {signal: abortSignal});
  },
});

Le code ci-dessus récupérera l'utilisateur avec l'identifiant particulier, quand le signal userId change.

Maintenant supposons que les développeurs d'Angular récupèrent des données depuis une WebSocket. À cette fin, ils peuvent utiliser une ressource de streaming :

@Component({
  template: `{{ dataStream.value() }}`
})
export class App {
  // La logique d'initialisation WebSocket vivra ici...
  // ...
  // Initialisation de la ressource de streaming
  dataStream = resource({
    stream: () => {
      return new Promise<Signal<ResourceStreamItem<string[]>>>((resolve) => {
        const resourceResult = signal<{ value: string[] }>({
          value: [],
        });

        this.socket.onmessage = event => {
          resourceResult.update(current => ({
             value: [...current.value, event.data]
          }));
        };

        resolve(resourceResult);
      });
    },
  });
}

Dans cet exemple minimal, les développeurs d'Angular déclarent une nouvelle ressource de streaming, qui retourne une promesse d'un signal. Le signal a un type de valeur ResourceStreamItem<string[]>, ce qui signifie que le signal peut contenir la valeur { value: string[] } ou {error: … } au cas où ils voudraient retourner une erreur.

Ils émettent les valeurs qu'ils reçoivent via la WebSocket via le signal resourceResult.

En s'appuyant sur ce pattern, ils ont aussi livré l'httpResource expérimental :

@Component({
  template: `{{ userResource.value() | json }}`
})
class UserProfile {
  userId = signal(1);
  userResource = httpResource<User>(() => 
    `https://example.com/v1/users/${this.userId()}`
  );
}

L'extrait ci-dessus enverra une requête HTTP GET à l'URL spécifiée à chaque fois que userId change. httpResource retourne HttpResourceRef qui a une propriété value de type signal qu'ils peuvent accéder directement dans le template. Le userResource a d'autres valeurs, telles que isLoading, headers, et autres, également.

Sous le capot, httpResource utilise HttpClient donc vous pouvez spécifier des intercepteurs dans le provider HttpClient :

bootstrapApplication(AppComponent, {providers: [
  provideHttpClient(
    withInterceptors([loggingInterceptor, cachingInterceptor]),
  )
]});

Promotion de Zoneless vers aperçu développeur

Au cours des six derniers mois, les développeurs d'Angular ont fait beaucoup de progrès dans zoneless, spécifiquement autour du rendu côté serveur et de la gestion d'erreurs.

Beaucoup de développeurs utilisent Zone.js pour capturer les erreurs dans leurs applications même sans s'en rendre compte. Zone.js permet aussi au framework de savoir quand ils sont prêts à vider l'application rendue côté serveur vers le client. Dans le monde de zoneless, ils ont dû trouver des solutions robustes pour ces problèmes.

Dans v20, ils ont maintenant un gestionnaire par défaut pour unhandledRejection et uncaughtException dans Node.js pendant SSR pour empêcher le serveur node de planter en cas d'erreurs.

Sur le client, vous pouvez inclure provideBrowserGlobalErrorListeners dans vos providers. Vous pouvez commencer à utiliser zoneless aujourd'hui en mettant à jour votre liste de providers :

bootstrapApplication(AppComponent, {providers: [
  provideZonelessChangeDetection(),
  provideBrowserGlobalErrorListeners()
]});

De plus, assurez-vous de retirer le polyfill zone.js de votre angular.json. Apprenez-en plus sur les bénéfices de zoneless et comment faire la transition de votre projet dans la documentation.

Si vous créez un nouveau projet Angular, vous pouvez le rendre zoneless dès le début en utilisant le CLI :

Solidification d'Angular sur le serveur

Dans v20, les développeurs d'Angular se sont aussi concentrés sur le peaufinage de leurs fonctionnalités phares de rendu côté serveur — l'hydratation incrémentale et la configuration du mode de rendu au niveau des routes. Aujourd'hui, ils sont heureux de promouvoir les deux vers stable !

Pour rappel, l'hydratation incrémentale rend vos applications plus rapides en téléchargeant et hydratant une portion de la page sur un déclencheur particulier. De cette façon, vos utilisateurs n'ont pas à télécharger tout le JavaScript associé à une page particulière, au lieu de cela ils peuvent graduellement télécharger seulement les parties dont ils ont besoin.

Pour commencer à utiliser l'hydratation incrémentale aujourd'hui, configurez l'hydratation en spécifiant withIncrementalHydration :

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
// ...
provideClientHydration(withIncrementalHydration());

Dans les templates de vos composants maintenant vous pouvez utiliser les vues différables :

@defer (hydrate on viewport) {
  <shopping-cart/>
}

De cette façon, Angular téléchargera le composant shopping cart avec ses dépendances transitives et hydratera cette partie de l'UI seulement quand elle entre dans la viewport.

De plus, vous pouvez maintenant utiliser la configuration du mode de rendu au niveau des routes comme une API stable ! Si différentes routes dans votre application ont différents besoins de rendu, vous pouvez configurer cela dans une configuration de route serveur :

export const routeConfig: ServerRoute = [
  { path: '/login', mode: RenderMode.Server },
  { path: '/dashboard', mode: RenderMode.Client },
  {
    path: '/product/:id',
    mode: RenderMode.Prerender,
    async getPrerenderParams() {
      const dataService = inject(ProductService);
      const ids = await dataService.getIds(); // ["1", "2", "3"]
      // id est utilisé à la place de :id dans le chemin de route.
      return ids.map(id => ({ id }));
    }
  }
];

Dans l'extrait ci-dessus, les développeurs d'Angular configurent pour rendre la page de connexion sur le serveur, le tableau de bord sur le client, et pré-rendre les pages de produit.

Notez que la page de produit nécessite un paramètre id. Pour résoudre les identifiants pour chaque produit, ils peuvent utiliser la fonction asynchrone getPrerenderParams. Elle retourne un objet dans lequel ses clés correspondent aux paramètres de routeur. Dans le cas de la page /product/:id, ils retournent un objet avec une propriété id.

Vous pouvez héberger vos applications rendues côté serveur avec la plupart des fournisseurs cloud. Les développeurs d'Angular ont travaillé étroitement avec Firebase App Hosting sur une histoire de déploiement transparente qui supporte le rendu hybride (SSR, SSG, et CSR) et vous fournit la sécurité et la scalabilité de Google Cloud.

Peaufinage de l'expérience développeur

Les développeurs d'Angular ont passé beaucoup de temps pendant le développement de v20 sur l'excellence d'ingénierie — peaufinant les API existantes pour améliorer votre expérience développeur. Ils ont fait cela sur toute la ligne — framework, routeur, formulaires, http, etc. Laissez-moi partager plus sur le travail qu'ils ont fait ici !

Insights de performance dans Chrome DevTools

Pour améliorer davantage l'expérience développeur et fournir des insights plus profonds dans la performance d'application, les développeurs d'Angular ont collaboré avec l'équipe Chrome DevTools pour intégrer des données de profilage spécifiques à Angular directement dans le panneau Performance. Précédemment, les développeurs devaient souvent basculer entre les profileurs spécifiques au framework et les DevTools du navigateur, rendant difficile la corrélation d'informations et l'identification des goulots d'étranglement, spécialement avec le code de production minifié. Cette nouvelle intégration vise à résoudre cela en affichant les données de runtime Angular, telles que le rendu de composant, les cycles de détection de changement, et l'exécution d'écouteurs d'événements, dans la même timeline que les autres métriques de performance du navigateur.

Cette intégration directe, disponible à partir d'Angular v20, exploite l'API d'extensibilité du panneau Performance, utilisant spécifiquement l'API console.timeStamp pour sa faible surcharge, s'assurant que le profilage n'impacte pas négativement la performance de l'application. Les développeurs peuvent maintenant obtenir une visibilité améliorée dans le fonctionnement interne d'Angular, avec des entrées codées par couleur pour distinguer entre le code TypeScript écrit par le développeur et le code généré par le compilateur Angular. Pour activer cette fonctionnalité, exécutez simplement l'utilitaire global ng.enableProfiling() dans votre application ou la console DevTools. Cette avancée fournit une expérience d'analyse de performance plus intuitive et complète, permettant aux développeurs de construire des applications Angular encore plus performantes.

Sur la capture d'écran ci-dessus, vous pouvez voir cette fonctionnalité en action. Notez comment au bas de la timeline de performance il y a une piste dédiée à Angular. Avec les barres codées par couleur, vous pouvez prévisualiser l'instanciation de composant, l'exécution de la détection de changement, etc. Angular DevTools et la piste Angular dans la timeline de performance Chrome utilisent les mêmes hooks avec la différence que la timeline de performance de Chrome peut mettre le cycle de vie de votre application dans le contexte d'autres appels JavaScript en dehors du framework.

De plus, la piste Angular dans la timeline de performance de Chrome montre certaines données qui ne sont actuellement pas présentes dans Angular DevTools, telles que l'instanciation de composant et de provider.

Ajouts et améliorations du framework

Pour créer dynamiquement un composant Angular, vous pouvez utiliser la fonction createComponent. Dans v20, les développeurs d'Angular introduisent de nouvelles fonctionnalités qui vous permettent d'appliquer des directives et de spécifier des liaisons aux composants créés dynamiquement :

import {createComponent, signal, inputBinding, outputBinding} from '@angular/core';

const canClose = signal(false);
const title = signal('My dialog title');

// Créer MyDialog
createComponent(MyDialog, {
  bindings: [
    // Lier un signal à l'input canClose.
    inputBinding('canClose', canClose),

    // Écouter l'événement `onClose` spécifiquement sur le dialog.
    outputBinding<Result>('onClose', result => console.log(result)),

    // Crée une liaison bidirectionnelle avec la propriété title
    twoWayBinding('title', title),
  ],
  directives: [
    // Appliquer la directive FocusTrap à MyDialog sans aucune liaison.
    FocusTrap,

    // Appliquer la directive `HasColor` à `MyDialog` et lier la valeur `red` à son input `color`.
    // Le callback à `inputBinding` est invoqué à chaque détection de changement.
    {
      type: HasColor,
      bindings: [inputBinding('color', () => 'red')]
    }
  ]
});

Ci-dessus, les développeurs d'Angular créent un composant dialog et spécifient :

• Liaison d'input canClose, passant le signal canClose comme valeur
• Définir l'output onClose à un callback qui log le résultat émis
• Liaison bidirectionnelle entre la propriété title et le signal title

De plus, ils ajoutent les directives FocusTrap et HasColor au composant. Notez qu'ils peuvent aussi spécifier des liaisons d'input pour la directive HasColor qu'ils appliquent à MyDialog.

Syntaxe d'expression de template étendue

Les développeurs d'Angular ont comblé l'écart entre les expressions de template Angular et la syntaxe JavaScript complète pour permettre une plus grande expressivité et une meilleure expérience développeur. Aujourd'hui, ils introduisent le support pour l'opérateur exponentiel ** et l'opérateur in :

<!-- n à la puissance deux -->
{{ n ** 2 }}

<!-- vérifie si l'objet person contient la propriété name -->
{{ name in person }}

Dans v20, ils vous permettent aussi d'utiliser des littéraux de template non étiquetés directement dans les expressions :

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

Diagnostics étendus

Pour se prémunir contre les erreurs communes, les développeurs d'Angular ont introduit des vérifications statiques qui détectent la coalescence nullish invalide, la détection d'imports manquants pour les directives structurelles, et un avertissement quand vous n'invoquez pas la fonction track que vous avez passée à @for :

@Component({
  template: `
    @for (user of users; track trackFn) {
      <!-- ... -->
    }
  `
})
class UserList {
  users = getUsers();
  
  trackFn() {
    // ... body
  }
}

La boucle @for dans les templates Angular accepte une expression track. En pratique, trackFn par lui-même est une expression qui retourne la fonction trackFn qui est une valeur valide. En même temps, très probablement ils auraient voulu appeler trackFn et les nouveaux diagnostics rendent plus facile d'attraper de telles erreurs.

Mises à jour du guide de style

Après avoir vu comment des milliers d'applications utilisent Angular au cours de la dernière décennie, les développeurs d'Angular ont décidé de mettre à jour leur guide de style. Leurs objectifs principaux sont de le moderniser et de retirer les complexités inutiles.

Après avoir collecté les retours d'un RFC, ils ont introduit une série de simplifications — retirant les pratiques de santé de code non spécifiques à Angular du guide de style et déplaçant les meilleures pratiques Angular qui ne sont pas liées au style de codage vers la documentation. Ils ont aussi rendu les suffixes de nom de fichier et de nom de classe optionnels pour encourager un nommage plus intentionnel des abstractions qui réduit le boilerplate.

À partir d'Angular v20, par défaut Angular CLI ne générera pas de suffixes pour vos composants, directives, services, et pipes. Pour les projets existants, ng update activera la génération de suffixes en mettant à jour votre angular.json. Pour activer la génération de suffixes dans les nouveaux projets, utilisez la configuration schematic suivante :

{
  "projects": {
    "app": {
      ...
      "schematics": {
        "@schematics/angular:component": { "type": "component" },
        "@schematics/angular:directive": { "type": "directive" },
        "@schematics/angular:service": { "type": "service" },
        "@schematics/angular:guard": { "typeSeparator": "." },
        "@schematics/angular:interceptor": { "typeSeparator": "." },
        "@schematics/angular:module": { "typeSeparator": "." },
        "@schematics/angular:pipe": { "typeSeparator": "." },
        "@schematics/angular:resolver": { "typeSeparator": "." }
      },
  ...
}

Angular a beaucoup évolué au fil des années et les développeurs d'Angular voulaient refléter son évolution dans le guide de style également. En conséquence, ils ont retiré la plupart des conseils liés aux NgModules et ont revisité l'usage de @HostBinding et @HostListener en faveur de l'objet host dans les métadonnées de directive. Pour s'assurer qu'ils ne régressent pas l'expérience développeur avec les nouvelles directives, ils ont aussi adressé quelques lacunes dans le support des liaisons d'hôte.

Liaisons d'hôte améliorées

Une raison pour laquelle historiquement les développeurs d'Angular ont recommandé @HostBinding et @HostListener était qu'ils avaient marginalement un meilleur support d'éditeur que l'objet host dans les métadonnées de composant puisque vous pouvez les utiliser directement sur une liaison spécifique ou une méthode. En même temps, ils pouvaient être difficiles à repérer, utiliser des décorateurs, et pouvaient mener à du code plus encombrant.

Dans Angular v20, les développeurs d'Angular introduisent la vérification de type et le support de langage pour les expressions de liaison et d'écouteur d'hôte.

Dans le gif ci-dessous vous pouvez voir cette fonctionnalité en action. Ils obtiennent d'abord une erreur parce qu'ils appellent une fonction nommée getAppTile au lieu de getAppTitle. Une fois qu'ils corrigent ce problème, le service de langage détecte que le programme ne vérifie pas le type puisqu'ils passent un argument à une fonction qui n'attend aucun argument.

Pour activer cette fonctionnalité, définissez la propriété typeCheckHostBindings sous angularCompilerOptions dans tsconfig.json à true. Les développeurs d'Angular activeront cette fonctionnalité par défaut dans Angular v21.

Hydratation incrémentale dans Angular DevTools

Pour simplifier le débogage de l'hydratation incrémentale et des vues différables, vous pouvez maintenant les prévisualiser dans Angular DevTools directement !

La capture d'écran ci-dessous montre comment vous pouvez inspecter un bloc defer et le contenu qu'il charge plus tard.

Quand vous utilisez des blocs defer avec l'hydratation incrémentale, vous obtiendrez aussi des icônes indiquant si Angular a hydraté le composant actuel encore.

Support expérimental pour vitest

Avec la dépréciation de Karma, les développeurs d'Angular ont travaillé avec les auteurs de frameworks de test pour trouver un remplacement bien maintenu qui permet les tests de navigateur. Ils ont atterri une pull request qui crée un playground expérimental pour qu'ils essaient différents test runners.

Dans v20, Angular CLI vient avec un support vitest expérimental qui a le mode watch et les tests de navigateur !

Pour essayer vitest dans l'environnement node, dans votre projet exécutez :

npm i vitest jsdom --save-dev

Après cela, mettez à jour votre configuration de test dans angular.json vers :

"test": {
    "builder": "@angular/build:unit-test",
    "options": {
        "tsConfig": "tsconfig.spec.json",
        "buildTarget": "::development",
        "runner": "vitest"
    }
}

Ensuite vous pourriez avoir à mettre à jour vos fichiers de test unitaire pour inclure les imports corrects :

...
import { describe, beforeEach, it, expect } from 'vitest';
...

Finalement, ng test pour exécuter vos tests unitaires avec vitest.

Améliorations de qualité de vie dans Angular Material

Dans cette version, les développeurs d'Angular ont peaufiné davantage leur composant button pour mieux s'aligner avec la spécification M3.

Bouton tonal

Quelques-uns des changements :

• Ils ont implémenté le bouton tonal
• Aligné la terminologie avec la spécification M3
• Ajouté la capacité de définir l'apparence par défaut pour les boutons
• Ajouté le sélecteur matIconButton au bouton d'icône pour la cohérence

Quelques améliorations de qualité de vie qu'ils ont implémentées incluent :

• Nouveau closePredicate pour dialog qui ferme une requête avec 108
• Nouvelles API overlay pour un meilleur tree-shaking
• Maintenant gestion automatique de prefers-reduced-motion
• Nouveau token DI pour désactiver les animations
• MatButton et MatAnchor sont combinés donc les utilisateurs n'ont pas à importer les deux.

Support des développeurs utilisant GenAI

Pour permettre aux LLM de produire du code Angular moderne et vous permettre de construire des applications avec GenAI, les développeurs d'Angular ont lancé deux efforts :

1. Maintenir un fichier llms.txt (voir la pull request sur GitHub) qui aide les grands modèles de langage à découvrir la dernière documentation Angular et les échantillons de code
2. Fournir un point de départ pour les développeurs qui construisent des applications utilisant GenAI

Certains modèles de langage produisent encore de l'ancienne syntaxe Angular utilisant des directives structurelles au lieu du dernier flux de contrôle, ou utilisant NgModules au lieu de composants, directives, et pipes standalone. Résoudre ce problème est un processus multi-étapes que les développeurs d'Angular ont commencé avec la création d'un fichier llms.txt. À l'avenir, ils continueront à fournir des échantillons de code utilisant la dernière syntaxe Angular et exploreront le développement de prompts système qui indiquent aux LLM d'utiliser les bonnes API.

Le deuxième effort qu'ils ont commencé est de fournir des directives pour les développeurs qui construisent des API avec des fonctionnalités IA. Ils ont exécuté plusieurs streams en direct montrant comment vous pouvez exploiter Genkit et Vertex AI dans votre application Angular. Ils ont open sourcé les applications d'exemple et listé certaines des meilleures pratiques qu'ils ont découvertes sur angular.dev/ai.

Ce n'est que le tout début de faire d'Angular la solution pour vos applications IA agentiques.

Dépréciation de NgIf, NgFor, et NgSwitch

Les développeurs d'Angular ont introduit le flux de contrôle intégré d'Angular dans v17 pour apporter une série d'améliorations :

• Syntaxe plus intuitive, qui est plus proche de JavaScript
• Utilisation plus simple, sans besoin d'importer un autre module ou des directives individuelles
• Amélioration de performance en mettant à jour l'algorithme de diffing
• Vérification de type améliorée via le rétrécissement de type

Ils ont aussi livré un schematic qui avec une seule ligne de code vous permet de déplacer vos projets des directives structurelles vers le flux de contrôle intégré :

ng generate @angular/core:control-flow

Actuellement, plus de la moitié des applications Angular v17+ sur le jeu de données publiques HTTP Archive utilisent la nouvelle syntaxe !

Basé sur le sentiment de la communauté et les métriques d'adoption, en avançant les développeurs d'Angular déprécient *ngIf, *ngFor, et *ngSwitch et encouragent tout le monde à utiliser le dernier flux de contrôle intégré. Cela signifie que sous leur politique de dépréciation ils peuvent retirer les directives structurelles dans la version 22, un an à partir de maintenant.

Mascotte officielle Angular

Alors qu'Angular continue de grandir et d'évoluer, les développeurs d'Angular sont excités d'annoncer une nouvelle initiative qui enrichira davantage leur communauté incroyable : la création d'une mascotte officielle Angular ! Bien qu'Angular soit un framework bien reconnu et largement adopté, il lui manquait une représentation visuelle amusante que tant d'autres projets open-source réussis apprécient. Ils ont entendu vos demandes pour quelque chose de tangible avec lequel se connecter, comme une peluche ou un porte-clés, et ils sont ravis de se lancer dans ce voyage créatif avec vous tous. Leur équipe a collaboré avec les designers derrière les mascottes Dart et Firebase, partageant les forces principales d'Angular et l'esprit communautaire. Ce processus a mené à trois propositions de mascotte initiales qu'ils sont impatients de partager.

C'est là que vous, la communauté Angular, entrez en jeu ! Fidèles aux valeurs d'Angular d'inclusivité et de décisions menées par la communauté, ils ouvrent le processus pour que tout le monde contribue. Trouvez le RFC officiel de mascotte Angular à goo.gle/angular-mascot-rfc.

Voici un aperçu des concepts initiaux :

"Personnage en forme d'Angular" s'inspirant de leur logo

"Anglerfish" sage et résiliente (beaucoup plus mignonne que son homologue de la vraie vie !)

Une variation de la Anglerfish.

Les développeurs d'Angular vous invitent à consulter le RFC complet, voter pour une de ces propositions, suggérer des améliorations, et même proposer des noms. Vos retours ont été inestimables pour façonner les fonctionnalités d'Angular, et ils sont excités de voir ce même esprit collaboratif définir leur future mascotte. Créons quelque chose de vraiment spécial ensemble !

Merci pour toutes les contributions !

Autour du monde il y a des milliers d'auteurs de bibliothèques, d'organisateurs de conférences et de meetups, d'éducateurs, et d'autres personnes qui aident à faire avancer le web à travers Angular ! Les développeurs d'Angular n'auraient jamais été ici sans vous tous.

Depuis la date de sortie de v19, ils ont reçu et fusionné des commits de plus de 225 personnes à travers le framework, les composants, et le CLI ! Chaque changement que vous avez fait aide à rendre Angular meilleur. Les développeurs d'Angular voulaient mettre en évidence certaines des fonctionnalités qu'ils ont obtenues des membres de la communauté :

• Domenico Gemoli a ajouté markAllAsDirty à AbstractControl qui maintenant rend un composant spécifique et tous ses enfants comme dirty
• Enea Jahollari a implémenté un diagnostic étendu pour la fonction track non invoquée sur @for
• Enea Jahollari a aussi ajouté une migration pour convertir les templates pour utiliser des balises auto-fermantes pour la cohérence du code
• Jeri Peier a rendu possible l'utilisation de validateurs de formulaire avec des sets
• Kevin Brey a travaillé sur des diagnostics étendus pour vous aider à détecter les imports de directive structurelle manquants
• Lukas Spirig a introduit le support pour les éléments personnalisés pour RouterLink
• Meddah Abdallah a introduit des redirections asynchrones au routeur
• Younes Jaaidi a rendu possible l'exécution de tests avec compilation ahead of time dans Jest et Karma

Merci à tous !

En avant vers le futur !

Dans le cadre de v20, les développeurs d'Angular ont livré beaucoup de touches de peaufinage aux gros efforts qu'ils ont lancés au cours des dernières années tels que la réactivité, zoneless, l'hydratation incrémentale, les API de framework et de formulaires. Ils ont aussi mis des esquisses de haut niveau initiales pour les avancées à venir telles que selectorless, signal-forms, les tests unitaires, et une mascotte officielle Angular !

Les développeurs d'Angular construisent Angular pour vous et votre input est critique dans la façon dont ils avancent avec n'importe laquelle de ces initiatives. Alors que leurs plans de haut niveau pour ces projets majeurs prennent forme, ils partageront des mises à jour et des demandes de commentaires. Jusqu'à maintenant, assurez-vous de partager vos pensées pour la future mascotte officielle Angular ! Ils sont très excités de trouver une identité qui symbolise le produit et les valeurs d'Angular. Faites-leur savoir ce que vous pensez des concepts dans le RFC !

Jusqu'à la prochaine fois et merci de faire partie du voyage d'Angular !

Source

Traduction française de Angular v20