Rédigé par : Wahib Kerkeni,

Angular 18 – Nouveautés et améliorations

Angular 18 - nouveautés et améliorations

Introduction

Alors que le lancement tant attendu d’Angular 18 se rapproche à grands pas (il est prévu pour le 20 mai 2024), l’enthousiasme monte et les développeurs se préparent à découvrir les nouvelles fonctionnalités et les améliorations qu’il apportera. Angular a toujours su évoluer pour relever les défis et s’adapter aux besoins changeants des développeurs, offrant à chaque mise à jour son lot d’innovations, d’optimisations et d’améliorations. Dans cet article, nous allons aborder les nouvelles fonctionnalités passionnantes que nous réserve Angular 18.

Sommaire

Wahib Kerkeni

Rédigé par : Wahib Kerkeni,

Icon linkedIn

Catégorie : Actualité technologique

Ne manquez
aucune actualité

Nouveautés et améliorations d’Angular 18

1. Redirection de route avec des fonctions

En premier lieu, Angular 18 introduit une nouvelle fonctionnalité qui permet aux développeurs de gérer les redirections à l’aide de fonctions plutôt que de chaînes de caractères. Cette amélioration offre une plus grande flexibilité dans le routage et ouvre de nouvelles possibilités. Par exemple :

// Before
const routes: Routes = [
{ path: ‘page1’, redirectTo: ‘/page2’, pathMatch: ‘full’ }
];

// After (using a function)
const routes: Routes = [
{
path: ‘page1’,
redirectTo: (url) => {
return ‘/page2’;
},
pathMatch: ‘full’
}
];

Angular 18 – Route Redirects with Functions.ts

L’avantage est que la fonction peut accéder à un objet contenant des informations sur l’URL, ce qui permet des redirections plus dynamiques.

2. Nouvelle classe RedirectCommand

Avant l’introduction de la classe RedirectCommand, les Guards et les Resolvers pouvaient rediriger la navigation en renvoyant un UrlTree, qui représente la nouvelle route (voir la capture d’écran ci-dessous). Cependant, cette méthode ne permet pas la redirection de navigation en utilisant NavigationExtras.

// Before
const route: Route = {
path: ‘page1’,
component: MyPage,
canActivate: [
() => {
const router: Router = inject(Router);

const urlTree: UrlTree = router.parseUrl(‘./page2’);
return urlTree;

},
],
};

Angular 18 – New RedirectCommand class (before).ts

Pour résoudre ce problème, Angular 18 introduit une nouvelle classe RedirectCommand, qui gère les NavigationExtras, vous permettant de rediriger la navigation dans les Guards et les Resolvers.

// After (using RedirectCommand)
const route: Route = {
path: ‘page1’,
component: PageComponent,
canActivate: [
() => {
const router: Router = inject(Router);
const urlTree: UrlTree = router.parseUrl(‘./page2’);
return new RedirectCommand(urlTree, { skipLocationChange: true });
},
],
};

Angular 18 – New RedirectCommand class (after).ts

Cette amélioration offre davantage de maintenabilité et de flexibilité, ce qui facilite la gestion de schémas de navigation complexes dans les applications Angular.

3. Le contenu par défaut dans ng-content

Le contenu par défaut est désormais autorisé à l’intérieur de la balise ng-content. Cette extension logique permet aux développeurs d’inclure directement du contenu par défaut dans la balise elle-même :

<div>

<h1>Header</h1>
<ng-content>Default</ng-content>

</div>

Default Content in ng-content.html

4. Applications Zoneless

Angular 18 vise à intégrer les “Signals” dans les applications pour fonctionner sans dépendre de zone.js. Cette optimisation améliore les performances et la réactivité.

Matthieu Riegler et Enea Jahollari ont chacun publié des articles sur ce sujet. L’article de Matthieu explore le nouveau système hybride de détection des modifications. Il met en avant la façon dont des opérations telles que les changements des “Signals” ou les “async pipe” qui invoquent markForCheck peuvent déclencher automatiquement la détection des modifications, même en dehors de zone.js.

En parallèle, l’article d’Enea se concentre sur la désactivation complète de zone.js et sur la dépendance exclusive de ces nouveaux mécanismes de déclenchement pour gérer les changements d’état de l’application.

5. Prise en charge de TypeScript 4.7

Angular 18 exploite pleinement les capacités de TypeScript 4.7. Ce superset robuste de JavaScript introduit diverses améliorations de performance, telles que des temps de compilation plus rapides et une procédure de construction simplifiée, un meilleur support de Readonly, de nouveaux types d’importation et des types de littéraux de modèle. Ces améliorations se traduisent par une expérience de développement plus fluide et une exécution potentiellement plus rapide des applications.
À noter qu’Angular 18 abandonne la prise en charge des versions de TypeScript antérieures à 5.4. Ainsi, la mise à jour de votre version de TypeScript vous permettra de tirer parti de ces améliorations.

6. Amélioration des performances avec Ivy

Ivy, le nouveau moteur de rendu d’Angular, continue d’améliorer les performances et de réduire la taille des bundles.

7. Nouvelle API ng-template

Angular 18 pourrait également introduire des améliorations à l’API ng-template, la rendant plus puissante et plus flexible.

8. API forms améliorée

Quant à l’API des formulaires, elle a reçu plusieurs améliorations. Ces dernière la rendent plus puissante et plus conviviale pour les développeurs :

  • Définition plus simple des objets de formulaire : cette fonctionnalité vous permet de créer des modèles de formulaire avec moins de code redondant, améliorant la lisibilité et la maintenabilité.
  • Règles de validation simplifiées : l’API fournit de meilleures abstractions pour les scénarios de validation courants, facilitant la gestion des champs obligatoires, des valeurs min/max, des motifs et des validateurs personnalisés.
  • Gestion de scénarios de validation complexes : qu’il s’agisse de validation entre champs ou de règles de validation dynamiques, Angular 18 offre de meilleurs outils pour gérer les cas complexes.
  • Contrôle raffiné : cette dernière amélioration vous donne plus de contrôle sur la validation des formulaires. Vous pouvez personnaliser les messages d’erreur, gérer la validation asynchrone et réagir efficacement aux saisies de l’utilisateur.

9. Outils de débogage améliorés

Pour finir, Angular 18 introduit plusieurs améliorations aux outils de débogage. Ces améliorations visent à simplifier le processus de débogage des applications Angular et à fournir des informations plus approfondies sur l’état de l’application, notamment :

  • Débogage avec des cartes sources ;
  • Visualisation de l’arbre des composants et des liaisons de données.

Conclusion

Angular 18 promet donc des changements intéressants pour les développeurs. Avec une attention portée sur la simplicité, des composants améliorés et des outils optimisés, cette version vise à améliorer davantage notre expérience de développement. Alors que nous attendons avec impatience sa sortie, les tests révéleront son véritable impact.

Partager