Annonce d’Angular v20

Ces dernières années ont été transformatrices pour Angular, avec l’introduction de fonctionnalités majeures comme la réactivité basée sur les signaux (Signals) et la puissance des applications sans Zone.js…

Principaux points forts :

• Stabilisation d’APIs telles que effect, linkedSignal, toSignal, hydratation incrémentale, 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 intégration avec Chrome DevTools pour des rapports personnalisés Angular
• Expérience développeur améliorée : mise à jour du guide de style, vérification des types et prise en charge des host bindings, support des littéraux de template non balisés, remplacement à chaud par défaut, etc.
• Avancées en IA générative avec le fichier llms.txt et des guides/vidéos sur angular.dev pour créer des applications GenAI
• Lancement d’une consultation (RFC) pour choisir une mascotte officielle pour Angular

Les fonctionnalités de réactivité deviennent stables

Après trois ans d’évolution, Angular annonce la stabilisation des APIs signal, computed, input et des requêtes de vue. Aujourd’hui, effect, linkedSignal et toSignal deviennent également stables.

Nouvelles APIs expérimentales

resource

L’API resource permet de lancer une action asynchrone lorsqu’un signal change…

const userId: Signal = getUserId();
const userResource = resource({
  params: () => ({id: userId()}),
  loader: ({request, abortSignal}): Promise => {
    return fetch(`users/${request.id}`, {signal: abortSignal});
  },
});

Ressource en streaming

Supposons maintenant que nous recevons des données via WebSocket…

@Component({
  template: `{{ dataStream.value() }}`
})
export class App {
  dataStream = resource({
    stream: () => {
      return new Promise>>(…);
    },
  });
}

httpResource

Voici l’API expérimentale httpResource :

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

Zoneless passe en aperçu développeur

Angular v20 gère désormais par défaut les erreurs unhandledRejection et uncaughtException… Côté client, il suffit d’inclure provideBrowserGlobalErrorListeners.

Solidification d’Angular côté serveur

Angular continue d’améliorer ses fonctionnalités de rendu côté serveur — notamment l’hydratation incrémentale et la configuration du mode de rendu par route…

Améliorations de l’expérience développeur

Analyse de performance dans Chrome DevTools

Des données spécifiques à Angular sont désormais visibles dans l’onglet “Performance” de Chrome, en activant ng.enableProfiling().

Ajouts et améliorations du framework

Pour créer dynamiquement un composant Angular, utilisez la fonction createComponent…

Extension de la syntaxe des templates

Support des opérateurs exponentiels **, in et des littéraux de template non balisés dans les expressions.

Diagnostics étendus

Des vérifications statiques détectent les utilisations invalides de l’opérateur nullish, les directives structurelles non importées, les track non appelés, etc.

Améliorations des host bindings & guide de style

Le CLI ne génère plus les suffixes automatiquement ; prise en charge et typage amélioré des host bindings via angularCompilerOptions.typeCheckHostBindings=true.

Hydratation incrémentale dans DevTools

Prévisualisez les blocs différés et l’état d’hydratation directement dans Angular DevTools.

Support expérimental de Vitest

Installez vitest et jsdom, puis configurez angular.json pour utiliser Vitest en mode “watch” ou navigateur.

Améliorations de Angular Material

Boutons tonals, nouvelles APIs de superposition, gestion automatique de reduced-motion, unification de MatButton et MatAnchor, etc.

Support GenAI

Le fichier llms.txt est maintenu, accompagné de guides/vidéos/exemples pour construire des apps d’IA générative.

Dépréciation de NgIf, NgFor et NgSwitch

Depuis l’introduction du contrôle de flux intégré en v17, ces directives structurelles sont dépréciées et seront supprimées en v22.

Une mascotte officielle Angular

Lancement d’un RFC avec trois propositions initiales : une mascotte en forme de logo Angular, un poisson lanterne (anglerfish) et des variantes. Les retours de la communauté sont les bienvenus.

Merci pour vos contributions !

Depuis la sortie de v19, plus de 225 personnes ont contribué…

En route vers l’avenir !

La v20 inclut la réactivité, zoneless, hydratation incrémentale, et les previews de selectorless, signal-forms, tests unitaires et la mascotte. Vos retours restent essentiels.