Tout ce qui vous manque dans Angular v18

En tant que version de « polissage », Angular 18 a certainement beaucoup à offrir. Découvrez quelques-uns des plus grands moments forts.

Les fonctionnalités de la version angulaire 18 ont été verrouillées le 1er mai et le 22 mai, elles ont été officiellement publiées !! Il est impressionnant, avec une libération qualifiée de libération « de polissage », de voir la quantité de viande qu’elle contient réellement.

Mark Thompson ouvre le flux Angular avec style

Dans cet article, je mettrai en évidence certaines de mes fonctionnalités préférées dans Angular 18, mais pour une portée plus large et une dose de la personnalité unique et merveilleuse de l’équipe Angular, consultez leur court flux de publication. Maintenant, plongeons-nous !

Une belle longue liste à puces de quelques de la nouveauté :

• Angular.dev n’est plus en version bêta cette version et la v18 n’est publiée que sur angulaire.dev (le nouveau site de documentation).
• @defer est stable et le support dans les bibliothèques augmente !
• Le flux de contrôle est stable.
• Mises à jour de la fusion de zones et de la prise en charge sans zone.
• Détection de changement sans zone.
• Méthode d’événement unifiée pour FormControl, FormGroup et FormArray.
• Améliorations et mises à jour de l’hydratation.
• Prise en charge améliorée des itinéraires avec SSG.
• ng update vous invitera maintenant à passer au nouveau applicationBuilder.
• ApplicationBuilder reçoit également des corrections de bogues dans cette version.
• Fonctionnalité de construction : le nouveau package appelé angulaire build (angulardevkitbuilder) inclut uniquement un générateur qui ne dépend pas du webpack.
• (Le générateur d’applications nous prépare également à un meilleur HMR.)
• de développement === de service
• Prise en charge de Typescript 5.4 !!
• Et plus!

Mises à jour du générateur d’applications

ng update a maintenant une invite pour vous encourager à migrer de l’ancien générateur de navigateur vers le nouveau générateur d’applications.

CLI nous invitant à utiliser le générateur d’applications

Le constructeur d’applications reçoit également des corrections de bugs dans cette version ainsi qu’une nouvelle fonctionnalité de construction intéressante ! Il existe un nouveau package appelé angulaire build (angulardevkitbuilder) qui inclut uniquement les dépendances qui ne dépend pas du webpack. Cela réduit la taille des installations et le nombre de dépendances requises. Les applications de didacticiel/démo utilisant Angulardevkitbuilder seront extrêmement rapides. 🔥

En plus de toutes ces nouveautés, le créateur d’applications nous prépare également à un meilleur HMR (remplacement de module à chaud) à l’avenir.

L’équipe souhaite utiliser ce nouveau package de construction angulaire pour tout projet nouvellement généré avec la CLI :ng new. Mais ng new a toujours besoin d’un package appelé Karma, et Karma nécessite webpack.

Statistiques Webpack vs No Webpack :

Fusion d’événements Zone.js

Pour les nouvelles applications utilisant Zone.js, l’équipe a activé la fusion d’événements par défaut (pour réduire les cycles de détection des changements). Pour activer la fusion d’événements dans les applications existantes, ajoutez simplement ceci à votre bootstrap :

bootstrapApplication(App, {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true})
  ]
});

Découvrez la démo de détection des trois petits changements de Pawel sur StackBlitz : https://stackblitz.com/edit/stackblitz-starters-ba1out?file=src%2Fmain.ts. Avec la fusion d’événements activée, les trois détections de changement descendent à une pour ce simple clic de bouton :

Ou, au moins, cela reviendrait à un s’il n’y avait pas de macrotâches étranges programmées pour mousedown. Comme Pawel me l’a expliqué :

Mousedown semble être spécial dans le sens où les navigateurs planifieront des macrotâches (setTimout / requestAnimationFrame) que nous utilisons pour la planification de la détection des changements.

Il s’agit bien entendu d’un exemple très simple de réduction des cycles de détection de changement. Mais comme vous pouvez l’imaginer, à grande échelle, pour des applications à part entière, cette réduction pourrait être ahurissante en termes de performances.

Dans l’ensemble, l’équipe encourage fortement les développeurs angulaires à ajouter provideZoneChangeDetection({ eventCoalescing: true }) aux applications existantes, car cela pourrait être l’une des choses les plus simples et les plus efficaces à faire, en termes de performances. Vérifiez article de blog de l’équipe pour plus de détails!

Une note sur le fait de devenir sans zone

L’attente asynchrone n’est pas patchable par singe et n’utilise pas de vraies promesses. La CLI vérifiera si vous incluez Zone.js en tant que polyfill et vous rétrogradera si c’est le cas. Sinon, si vous êtes sans zone, vous bénéficierez des avantages de l’utilisation de l’async/await natif.

Vous pouvez désormais déboguer l’hydratation dans Angular DevTools. Vous pouvez désactiver l’hydratation dans les morceaux DOM et voir si l’erreur que vous obtenez disparaît. (Par conséquent, vous faire savoir qu’il s’agit d’un problème d’hydratation.)

De plus, vous pouvez désormais déboguer les iframes dans Angular DevTools. Vous pouvez réellement choisir dans quelle iframe vous vous trouvez dans les outils, ce qui offre une nouvelle façon unique d’inspecter vos applications Angular. 💕

de développement === de service

Nouveau avec la version 18, vous pouvez démarrer votre serveur local non seulement avec la commande existante de ng serve mais vous pouvez aussi maintenant utiliser ng dev!

Utiliser ng dev pour démarrer le serveur de développement

Hydratation

Il y a un certain nombre de mises à jour concernant l’hydratation et l’hydratation partielle !

• Les composants matériels soutiennent désormais pleinement l’hydratation !
• Matthieu Riegler, membre de la communauté, a ajouté un moyen de visualiser l’hydratation aux Angular DevTools !
• Un support d’hydratation pour i18n sera bientôt disponible.

Hydratation partielle

L’hydratation partielle a également fait l’objet de quelques mises à jour !

• Les blocs de report fonctionnent comme des limites d’hydratation partielles.
• Le contenu principal d’un bloc différé sera rendu sur le serveur.
• Les déclencheurs déclencheront l’hydratation. 😲
• Configurable par bloc et par application.

À venir

À venir

• Modernisation des tests unitaires et exécuteur de tests Web sur Karma
• Débogage du signal 👀
• Visualisation des itinéraires (lesquels sont chargés avec impatience ou chargés paresseusement, donnent un aperçu de l’application pour les nouveaux développeurs de l’équipe, identifient même les itinéraires qui devraient être chargés paresseusement et qui ne le sont pas actuellement) 🤫

Une note sur la fusion Wiz

Vous avez peut-être entendu ou non le brouhaha à propos de « Wangular », alias Wiz + Angular. La fusion est décrite en détail dans ce post de Jatin et Minko de l’équipe Angular.

L’équipe en a parlé un peu plus en profondeur lors de ng-conf. Comme le mentionne l’article, l’équipe Angular a déjà utilisé les choses qu’elle a apprises de l’équipe Wiz dans les mises à jour de notre framework. Je pense qu’il s’agit d’une progression naturelle pour les deux équipes et, aussi cool que puisse paraître Wangular, à première vue, ce sera toujours la communauté et le framework que nous connaissons et aimons, peut-être avec quelques fonctionnalités plus intéressantes adoptées par Wiz.

L’équipe Angular a déjà mis l’équipe Wiz à la disposition des GDE, et nous avons eu l’occasion de leur poser des questions et de voir de quoi ils parlent. Je pense que seules de bonnes choses viendront de la collaboration et du rapprochement des deux équipes. Je pense que Wiz changera beaucoup plus qu’Angular. Et toute adoption de Wiz sera toujours discutée dans une RFC communautaire avant de la tester dans l’aperçu du développeur. Je pense que l’équipe Angular va dans la meilleure direction possible et j’ai hâte d’essayer moi-même la v18 et de voir quels avantages la version 19 aura à offrir !

Kendo UI + Angulaire v18 = ❤️‍🔥

L’équipe Progress Kendo UI est fière de prendre en charge la dernière version d’Angular le jour de sa sortie. Nos développeurs travaillent dur pour garantir que notre bibliothèque soit prête pour ceux d’entre vous qui aiment vivre à la pointe de la technologie ! Ironiquement, notre équipe a également célébré la sortie d’une version le même jour que la v18 !

Découvrez mon webinaire pour un aperçu approfondi des nouvelles fonctionnalités et composants (y compris tous les nouveaux composants de chronologie de notation et de graphique sankey !).

Comme mentionné précédemment, je n’ai pas couvert TOUS les goodies, juste mes points forts. Donc, à titre de référence, voici plus de ressources pour vous fournir des informations complètes. Bon codage à tous !