Standalone est le futur (3 septembre 2024)

Ce qu'il faut retenir

La version 19 d'Angular rendra l'option standalone: true par défaut pour les composants, les directives et les pipes.

Dans la version 14, les développeurs d'Angular ont introduit une prévisualisation pour développeurs de la fonctionnalité "standalone", qui a permis pour la première fois de construire une application sans dépendre des NgModules. Depuis lors, la fonctionnalité standalone a été stabilisée et est devenue la méthode recommandée par les développeurs d'Angular pour écrire du code Angular. L'interface en ligne de commande (CLI) génère des composants avec standalone: true par défaut, et la documentation Angular enseigne d'abord la méthode standalone à tous les nouveaux développeurs Angular. L'adoption est forte et continue de croître dans l'écosystème Angular, tant dans les plus grandes applications Angular écrites chez Google que dans les applications sur Internet.

Non seulement standalone facilite l'apprentissage et la prise en main d'Angular, mais il a également permis de mettre en place quelques nouvelles fonctionnalités intéressantes. Dans @angular/router, loadComponent simplifie considérablement le chargement paresseux au niveau des routes et repose sur la fonctionnalité standalone. L'API de Composition des Directives permet un meilleur modèle de composition pour le comportement des composants en permettant aux directives standalone d'être appliquées dans la déclaration d'un composant ou d'une directive hôte. Et bien sûr, les Vues Différables permettent de charger de manière paresseuse et transparente des composants et directives standalone au niveau du template, rendant l'optimisation de vos applications Angular plus facile que jamais.

Dans la version 19, les développeurs d'Angular franchiront une nouvelle étape en activant par défaut l'option standalone dans les composants, directives et pipes, vous n'aurez donc plus besoin de taper "standalone: true". Avec ce changement, des composants comme :

@Component({
  standalone: true,
  imports: [UserAvatarComponent, AccountListComponent, FormsModule],
  selector: 'user-profile',
  template: './user-profile-component.html',
})
export class UserProfileComponent {…}

seront désormais écrits comme :

@Component({
  imports: [UserAvatarComponent, AccountListComponent, FormsModule],
  selector: 'user-profile',
  template: './user-profile-component.html',
})
export class UserProfileComponent {…}

Et si j'utilise encore des NgModules ?

Pas de problème — les développeurs d'Angular ne déprécient pas l'option standalone ni les NgModules eux-mêmes. Vous pourrez toujours écrire des composants NgModule en spécifiant standalone: false dans le décorateur du composant.

Que devrai-je faire pour mon code existant utilisant standalone ou NgModules ?

Dans le cadre de la mise à jour ng pour la version 19, les développeurs d'Angular appliqueront une migration automatisée qui :

• Supprimera standalone: true pour les composants standalone existants, car ce sera le nouveau paramètre par défaut.
• Ajoute standalone: false aux composants NgModule existants pour qu'ils continuent de fonctionner.
• En option, vous pourrez définir l'option strictStandalone du compilateur pour imposer que seuls des composants standalone soient écrits dans votre application.

Qu'en est-il de FormsModule et des autres bibliothèques npm avec des NgModules ?

Rien ne changera ici. Les composants standalone pourront continuer à importer des dépendances NgModule si nécessaire, même avec l'option strictStandalone du compilateur activée.

Si vous êtes l'auteur d'une bibliothèque publiée sur NPM, vous n'aurez rien à faire non plus — vos composants se comporteront correctement lorsqu'ils seront importés par les utilisateurs, qu'ils utilisent ou non la version 19 avec le nouveau paramètre par défaut.

Source

https://blog.angular.dev/the-future-is-standalone-475d7edbc706