Moderniser Angular : Quoi de neuf dans Angular 19

Angular 19 est officiellement arrivé et il regorge d'une gamme de fonctionnalités visant à améliorer l'expérience, les performances et l'adaptabilité des développeurs.

Dans cet article, je vais vous présenter les principaux points forts et ce qui fait d'Angular 19 une étape cruciale pour le développement Web moderne.

1. Hydratation incrémentielle : un changement de donne pour la RSS

L'introduction de l'hydratation incrémentale dans Angular 19 porte le rendu côté serveur (SSR) vers de nouveaux sommets. Contrairement à l'approche traditionnelle d'hydratation complète, l'hydratation incrémentielle permet aux composants rendus par le serveur de s'hydrater uniquement lorsqu'ils entrent dans la fenêtre d'affichage ou deviennent interactifs.

Cela se traduit par des temps de chargement plus rapides et une meilleure expérience utilisateur. Cette fonctionnalité est actuellement en aperçu pour les développeurs, mais elle s'avère très prometteuse pour optimiser la charge initiale et améliorer les scores Lighthouse.

Pour y parvenir, Angular a collaboré avec Chrome Aurora pour offrir une expérience SSR plus transparente, adaptable à une utilisation réelle, en se concentrant sur l'hydratation paresseuse. Les développeurs peuvent désormais utiliser des directives comme @defer pour contrôler exactement quand un composant doit être hydraté, ce qui rend le processus très efficace.

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

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

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

2. Relecture d'événements : garantir des interactions utilisateur fluides

Un problème courant dans les applications rendues côté serveur est le délai entre une interaction utilisateur et le JavaScript responsable de la gestion de cette interaction en cours de chargement.

La

Relecture d'événements, désormais activée par défaut dans Angular 19, capture les événements utilisateur lors du chargement initial et les rejoue lorsque le JavaScript nécessaire devient disponible. Cela garantit une expérience utilisateur fluide, même si l'application est encore en train de s'hydrater.

Le envoi d'événements est alimenté par la même bibliothèque utilisée par la recherche Google (Wiz) et a été testé par des milliards d'utilisateurs.

Pour activer la relecture des événements, Angular utilise la configuration suivante dans le fournisseur d'hydratation :

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

Cela garantit que toutes les interactions utilisateur qui se produisent avant que le JavaScript ne soit complètement chargé ne sont pas perdues, offrant ainsi une expérience transparente.

3. Mode de rendu au niveau de la route : contrôle précis du rendu

Angular 19 introduit le mode de rendu au niveau de la route, qui permet aux développeurs de spécifier comment les routes individuelles d'une application doivent être restituées, soit sur le serveur, le client, soit pré-rendues pendant le processus de construction.

Cela permet un contrôle précis de la stratégie de rendu, permettant aux développeurs d'optimiser les performances et le référencement en fonction des besoins spécifiques de chaque itinéraire.

Exemple : Un itinéraire de connexion peut être rendu côté serveur pour des temps de chargement initiaux plus rapides, tandis qu'un itinéraire de tableau de bord peut être rendu côté client pour améliorer l'interactivité. Cette flexibilité permet de garantir que chaque partie de l'application est optimisée pour son cas d'utilisation prévu.

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

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

Angular fournit également un moyen simple de résoudre les paramètres d'itinéraire lors du prérendu, permettant ainsi des pages prérendues hautement personnalisables :

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

Cette nouvelle interface, ServerRoute, donne aux développeurs un meilleur contrôle sur la manière dont le contenu est diffusé, améliorant ainsi à la fois l'expérience utilisateur et le référencement.

4. Le remplacement du module à chaud (HMR) vient d'être instantané

Angular 19 introduit le HMR instantané, permettant de mettre à jour les styles et les modèles sans recharger l'intégralité de l'application. Cela signifie que les développeurs peuvent voir immédiatement l'effet de leurs modifications, ce qui rend le cycle de développement beaucoup plus fluide et plus rapide. Le remplacement à chaud des modules pour les styles est activé par défaut dans la v19 ! Pour essayer HMR pour les modèles, utilisez :

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

Pour désactiver cette fonctionnalité, spécifiez "hmr": false comme option du serveur de développement, ou utilisez :

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

5. Prise en charge sans zone : évolution continue

Il y a six mois, Angular a introduit le support expérimental sans zone. Depuis lors, Angular a parcouru les API et les a améliorées, en ajoutant la prise en charge du rendu côté serveur et en améliorant l'expérience de test.

Angular s'est associé à l'équipe Google Fonts pour rendre son application sans zone et évaluer l'expérience des développeurs. Les résultats ont dépassé les attentes, mais il reste encore quelques touches de peaufinage avant de déplacer cette API vers l'aperçu développeur.

Angular 19 continue de progresser vers un avenir où le fonctionnement sans zone deviendra la valeur par défaut, simplifiant considérablement la détection des changements et rendant les applications plus légères.

Pour expérimenter le sans zone, utilisez la configuration suivante :

export const routeConfig: ServerRoute = [{
  path: '/product/:id',
  mode: 'prerender',
  async getPrerenderPaths() {
    const dataService = inject(ProductService);
    const ids = await dataService.getIds();
    return ids.map(id => ({ id }));
  },
}];

6. Signaux liés : état réactif avec conscience contextuelle

L'un des nouveaux ajouts les plus intéressants est les signaux liés. Grâce à cette fonctionnalité, les signaux liés entre eux conservent leurs relations même lors de la mise à jour des données. Ceci est particulièrement utile pour les scénarios dans lesquels plusieurs points de données doivent rester synchronisés de manière dynamique. Par exemple, maintenir l'état d'une liste déroulante ou d'une sélection dérivée d'une autre source réactive est désormais plus simple et nécessite moins de passe-partout.

NG_HMR_TEMPLATES=1 ng serve

L'API linkedSignal fournit un moyen simple d'exprimer des dépendances entre des éléments avec état sans recourir à des effets. La nouvelle API se présente sous deux formes : une version simplifiée (illustrée ici) et une version avancée qui permet aux développeurs d'accéder aux valeurs précédentes des signaux liés et sources.

7. Mises à niveau des matériaux angulaires

Angular Material a également bénéficié d'une mise à niveau significative dans Angular 19. Il existe désormais une nouvelle API de thème plus personnalisable, permettant aux développeurs de remplacer facilement les styles et d'ajuster l'apparence des composants Angular Material sans plonger profondément dans Angular Material. CSS imbriqué. La documentation de chaque composant comprend également un onglet Style pour une référence plus facile sur la façon d'effectuer ces modifications.

Le très attendu composant Drag and Drop a finalement été ajouté nativement à Angular Material, permettant aux développeurs d'implémenter des interactions glisser-déposer sophistiquées sans recourir à des bibliothèques tierces.

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

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

Pour personnaliser des composants individuels :

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

8. Scripts de migration pour les signaux

La migration de votre application vers le nouveau modèle de réactivité basé sur les signaux est désormais plus simple grâce aux scripts de migration intégrés. Ces scripts aident à faire la transition de vos entrées, sorties et requêtes existantes pour utiliser des signaux au lieu des anciens décorateurs Angular, garantissant ainsi que votre application reste moderne avec un minimum d'effort.

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

9. Politique de sécurité du contenu améliorée

La sécurité est un autre objectif clé de cette version. Angular 19 introduit la prise en charge du auto CSP (Content Security Policy), qui ajoute automatiquement une configuration CSP sécurisée à votre application pour empêcher les attaques XSS et autres vulnérabilités par défaut. Il s'agit d'une étape importante vers de meilleures pratiques de sécurité avec moins de configuration manuelle.

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

10. L'avenir des tests en angulaire

Enfin, une remarque importante sur les tests : Karma est obsolète au profit d'outils plus modernes comme Jest et Web Test Runner. D'ici mi-2025, Karma ne sera plus pris en charge, ce qui donne aux développeurs suffisamment de temps pour migrer vers une configuration de test plus fiable qui s'intègre facilement au reste de l'écosystème Angular moderne.

Conclusion

Angular 19 n'est pas seulement une mise à jour ; il s'agit d'une version avant-gardiste qui optimise l'expérience des développeurs et des utilisateurs. Avec des fonctionnalités telles que l'hydratation incrémentielle, la relecture d'événements, les modes de rendu au niveau de l'itinéraire, le HMR instantané, l'évolution vers le sans zone et une pléthore d'améliorations de productivité, cette version rapproche Angular de son idéal : un framework moderne, hautes performances et convivial pour les développeurs. .

Si vous souhaitez migrer ou démarrer un nouveau projet, Angular 19 fournit une base solide qui prend en charge des fonctionnalités de pointe et des meilleures pratiques évolutives. Faites-moi savoir quelles fonctionnalités vous intéressent le plus ou si vous avez des questions sur l'adoption d'Angular 19 dans vos projets !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!