Quoi de neuf dans la dernière version d’Angular V15 ?

La dernière version d’Angular, Angular 15, est sortie le 16 novembre 2022, selon l’équipe Angular de Google. L’équipe a inclus plusieurs modifications et ajouts dans la version actuelle pour améliorer les performances et l’expérience des développeurs.

Pourtant, l’équipe a accompli de nombreuses choses passionnantes avec la version angulaire la plus récente. Cependant, Angular V15 ne manque pas de fonctionnalités ou de mises à jour susceptibles d’intéresser les programmeurs, les propriétaires d’entreprise ou les spécialistes de la technologie.

Quoi de neuf avec les fonctionnalités et les mises à jour d’Angular 15 ?

La version Angular 14 était la première fois que l’équipe Angular reconnaissait publiquement que l’élimination de l’ancien CompilerCompiler et du pipeline de rendu d’Angular avait abouti à une expérience bien supérieure pour les développeurs.

Des pensées similaires se produisent lors de la comparaison d’Angular 14 avec Angular 15. Les dernières nouvelles fonctionnalités d’Angular V15 incluent des API fiables et autonomes qui libèrent les développeurs d’Angular d’avoir besoin de modules Ng.

Code passe-partout réduit, plus de vitesse, une API de composition directive et de nombreuses autres améliorations et nouvelles fonctionnalités ne sont que quelques-unes de ce qu’il offre aux développeurs. Plongeons-nous dans les principales fonctionnalités et mises à jour des services de développement angulaires qui ont le plus impressionné les développeurs.

API autonome (maintenant, graduée et hors de l’aperçu du développeur)

Les applications peuvent désormais être développées indépendamment des modules Ng grâce à l’API autonome, qui a été rendue accessible par l’équipe Angular à partir d’Angular 14. Auparavant connue sous le nom d’aperçu du développeur, Angular V15 est désormais une version stable.
En préparation de sa sortie, l’équipe Angular a rigoureusement testé toutes les API et tous les composants pouvant être utilisés indépendamment. Auparavant, ils fonctionnaient partiellement, mais vous pouvez maintenant les utiliser avec tout, de HttpClient à Angular Elements en passant par un routeur.
Des composants distincts peuvent être utilisés dans Angular V15 pour coordonner les requêtes HTTP avec les routeurs clients, les éléments Angular, etc.
Parce qu’il a mûri au point où un seul composant peut lancer une application entière, cela ouvre de nombreuses possibilités. De même, nous pouvons apporter l’application bootstrap à l’élément en l’important directement depuis le navigateur de la plate-forme. De plus, nous pouvons définir la propriété autonome du tube de composant et la propriété autonome de la directive sur true en important la référence autonome.

Les API autonomes permettent la création d’applications multi-routes

L’intégration de plusieurs itinéraires dans une seule application est désormais possible avec les API autonomes de Router récemment publiées.
De plus, les bundlers peuvent réduire la taille du bundle d’environ 11 % en désactivant les fonctionnalités inutiles du routeur pendant la construction.

API de composition de directives

La fonctionnalité la plus demandée sur GitHub a finalement fait son chemin dans la version actuelle d’Angular V15.
C’est un outil pratique pour faciliter la réutilisation du code.
Il permet aux développeurs de gagner du temps en réutilisant le code lors de la création de l’application Angular et en augmentant le nombre de composants hôtes avec les directives.
Angular CompilerCompiler fournit un support de directive autonome pour l’API de composition de directive.
Toutes les déclarations de directive vont dans cette section, faisant de la composition de directive une fonction API disponible.

La directive d’image (image NgOptimized) est désormais stable

Maintenant que Angular 14 et Chrome Aurora sont tous deux disponibles dans la v14.2, la directive Image (Ngoptimized Image) a été ajoutée.
Le plus grand Contentful Paint (LCP) du laboratoire expérimental du phare de Land’s End a augmenté de près de 75 %.

La directive Image dans les nouvelles fonctionnalités d’Angular 15 comprend également :

Le temps de téléchargement de l’image peut être réduit en utilisant une directive de génération de srcset automatisée, qui crée automatiquement l’ensemble SRC pour faciliter le téléchargement et le dimensionnement approprié de l’image là où cela est nécessaire.
Le mode de remplissage (expérimental) ajustera automatiquement les dimensions de l’image pour remplir le conteneur parent. L’intégration de cette directive dans le processus de migration de l’image d’arrière-plan CSS est fortement recommandée.

Bien que la directive d’image NgOptimized soit souvent utilisée dans un composant angulaire ou un module Ng, elle peut également être utilisée directement dans l’application.

import { NgOptimizedImage } from '@angular/common';

// Include it into the necessary NgModule

@NgModule({

  imports: [NgOptimizedImage],

})

class AppModule {}

// ... or a standalone Component

@Component({

  standalone: true

  imports: [NgOptimizedImage],

})

class MyStandaloneComponent {}

Protections de routeur fonctionnelles

À l’aide des API de routeur autonomes arborescentes, l’équipe Angular s’est efforcée de réduire le passe-partout en retravaillant le code, ce qui a entraîné une taille de package Angular plus petite grâce à l’ajout de Functional Router Guards.

Le routeur déballe les importations par défaut

Avec l’ajout du déballage automatique pour les sorties par défaut et le chargement paresseux, le routeur est devenu encore plus facile à utiliser et a permis de réduire le passe-partout inutile.

Meilleures traces de pile

En utilisant Stack Trace, vous pouvez désormais déterminer facilement et rapidement l’emplacement exact d’une erreur dans le code et comment la corriger.

En voyant les difficultés des développeurs lors du débogage, cette fonction a été introduite.

Composants stables basés sur MDC

Le Refactoring des Systèmes à Composants est intense jusqu’à la version 14. MDC permet de travailler avec du Material angulaire (Material Design Component for the Web).
Chaque nouveau composant dans Angular V15 Features a une ancienne implémentation obsolète accessible à l’aide d’une importation « héritée ».

Autres améliorations

L’une des suggestions les plus populaires consiste à ajouter une option de sélection de plage au curseur.

Si vous souhaitez recevoir l’entrée de plage, utilisez le code suivant :

<mat-slider>

<input matSliderStartThumb>

<input matSliderEndThumb>

</mat-slider>

CDK (Component Dev Kit) Listbox

Importation automatique des services linguistiques

Les composants utilisés ou requis par le modèle peuvent désormais être importés par le service linguistique, même s’ils doivent encore être mis à disposition en tant que composant séparé ou module Ng.

Prise en charge étendue d’esbuild :

Pour faciliter des temps de construction plus rapides et des pipelines simplifiés, le support expérimental d’esbuild a été révélé dans Angular 14 dans ng build.
Le nouveau modèle de sauvegarde en tant que SVG, le remplacement de fichier et les versions ng – watch Support in Angular 15 rendent cela possible.

Comment mettre à niveau d’Angular V14 vers Angular V15

Choisissez les alternatives qui répondent à vos besoins.
Cliquez sur l’option « Montrez-moi comment mettre à jour ».

Mise à niveau d’Angular 14 vers Angular 15

Angular v15 est compatible avec les versions 14.20.x, 16.13.x et 18.10.x de Node.js.
Vérifiez que TypeScript est au moins à la version 4.8 avant de passer à Angular 15.
Pour mettre à jour votre application avec Angular 15, exécutez ng update @angular/core@15 @angular/cli@15 dans le répertoire du projet d’application.
Enfin, nous devons réviser les parties matérielles. Mise à jour @angular/material@15 en utilisant ng update.
La version 15 d’Angular CompilerCompiler ajoute le préfixe de portée du composant au CSS @keyframes. Par conséquent, dans V15, les noms d’images clés ne peuvent pas être utilisés dans TypeScript. Modifiez l’encapsulation de la vue de l’élément ou mettez à jour toutes les occurrences de Define Keyframes dans le code.
En tant que seul moteur de rendu dans Angular 15, la suppression de enable de tsconfig.json est inutile.
Les décorateurs doivent être utilisés dans les classes de base avec héritage de constructeur et DI. Le CompilerCompiler ne lancera une erreur que si ces classes de base sont annotées avec @Injectable ou @Directive.
Pour les états désactivés, Angular 15 utilise setDisabledState une fois par ControlValueAccessor a été appliqué. Au lieu de vous répéter, utilisez FormsModule. Avec configuration ou ReactiveFormsModule. avec configuration.
Pour ce faire, vous devez vérifier que la propriété title est définie sur chaque ActivatedRouteSnapshot objet. Le titre est un attribut V15 obligatoire de ActivatedRouteSnapshot.
En raison d’un manque de support dans le routeur, relativeLinkResolution ne peut pas être modifié dans Angular 15. Cela permettait aux utilisateurs d’éviter un correctif de bogue désormais standard.
Pour configurer le fuseau horaire, remplacez toutes les occurrences du DATE PIPE DEFAULT TIMEZONE jeton avec DATE PIPE DEFAULT OPTIONS. DATE PIPE DEFAULT TIMEZONE est un jeton obsolète à partir de la version 15.
Il est possible que les instances existantes de iframe > auront des caractéristiques relatives à la sécurité qui leur sont liées en tant qu’attributs ou propriétés. Ces fonctionnalités potentiellement dangereuses peuvent être présentes dans les liaisons hôtes d’une directive ou d’un modèle. Lorsque cela se produit, la mise à niveau vers la dernière version est essentielle pour suivre les normes les plus strictes en matière de iframe > reliures.
Remplacez toutes les occurrences de Injector. Obtenir (InjectFlags)‘s argument avec des injections. V15 supprime la prise en charge de la InjectFlags Injector. get() voir.
Toute demande de TestBed.inject sont encouragés () qui a précédemment accepté un InjectFlags l’argument soit mis à jour pour prendre un InjectOptions paramètre à la place. TestBed.inject(InjectFlags ) L’option est obsolète depuis Angular 15.
En version 15, il n’est plus recommandé d’utiliser à condition : ngModule avec un @Injectable et InjectionToken.
En V15, il n’est plus recommandé d’utiliser à condition : any avec un @Injectable ou InjectionToken.
Remplacer toutes les occurrences de RouterLinkWithHref avec RouterLink. Obsolète à partir de la version 15 est le RouterLinkWithHref directif.
Les composants de Angular Material v15 ont été refactorisés sur la base du MDC officiel, ce qui a des implications pour leurs classes DOM et CSS.
Si vous venez de passer à Angular 15, c’est une bonne idée de faire une inspection visuelle de l’application et de ses interactions pour vous assurer que tout fonctionne bien.

Conclusion

Ce que l’équipe Angular de Google a apporté au monde de la programmation. Ils ont fait un travail fantastique avec Angular 15, en tenant soigneusement compte des commentaires et des suggestions des développeurs.

Sur cette base, les objectifs importants d’Angular 15 incluent l’amélioration de la stabilité, de la productivité des développeurs et des performances. Nous pouvons nous attendre à des améliorations prévues et imprévues de la part de l’équipe angulaire sous peu.

Le moment est venu de commencer à apprendre Angular si vous êtes un propriétaire de produit et que vous avez un projet en cours pour lequel vous souhaitez l’utiliser.