ANGULAR
Angular : les standalone components, une révolution ?
Robin Jeanne, Consultant Sénior @DeliaTechnologies
February 7, 2023
7 min
Angular 15 est sortie il y a quelques mois maintenant, il est temps de faire un petit retour sur la principale nouveauté de cette release : les standalone components.
Cette “petite” RFC vient bousculer l’un des concepts coeurs d’Angular, le NgModule.
Les objectifs de cet ajout sont humbles :
Et ce n’est que le début, car une nouvelle RFC a été déposée en avril 2022, pour compléter cette notion, avec pour but la possibilité de construire des applications Angular sans utiliser le NgModule.
Angular change, mais concrètement, ça donne quoi ?
Aujourd’hui, un Component doit être rattaché à un NgModule pour être utilisable.
En modifiant le décorateur du Component, il est maintenant possible de le déclarer “standalone”.
Avant :
En mode standalone :
Cette feature avait été proposé en preview dans la version 14, elle est maintenant considérée comme stable
C’est possible !
Le framework offre une nouvelle fonction bootstrapApplication() permettant de bootstrap non plus un module au lancement de l’application, mais un composant standalone.
Et oui, c’est compatible avec le module SSR via renderApplication() !
Oui ! En fait, vous l’avez compris, un standalone component est un mélange entre un NgComponent et un NgModule. Vous pouvez donc importer un standalone component dans un NgModule !
Vous aviez l’habitude de ce bon vieux SharedModule, qui contient l’ensemble des NgComponent que vous partagez entre vos différents NgModule ? Pourquoi ne pas migrer l’ensemble de ces NgComponent en standalone component. Cette modification va permettre de ne plus à avoir à importer l’intégralité des composants via le SharedModule, mais uniquement des composants standalone requis.
Une fonctionnalité très intéressante d’Angular est le lazy-loading de NgModule. Maintenant que vous avez des composants standalone (qui sont également des modules), vous pouvez associer un chargement passif à un composant uniquement et non plus à un module :
Globalement, cette fonctionnalité ouvre la porte pour des applications plus légères, débarrassées de certaines couches de codes redondantes.
Oui, et non.
Cette feature va rester totalement optionnelle dans un premier temps. Dans un billet posté en avril sur le blog Angular, An Update on Standalone Components, l’équipe indique qu’elle ne souhaite pas impacter ng new dans un premier temps.
On peut parier que beaucoup de projets vont simplement ignorer cet ajout ou faire le choix de ne pas s’en servir.
Cependant, le pattern SCAM (Single Component Angular Module), qui existait déjà longtemps avant l’annonce des standalones components, est populaire. Pour les applications Angular dont l’architecture est déjà basée sur ce pattern, l’effort de migration est moindre. Certains ont même déjà proposés des scripts pour automatiser ça.
Pour ceux qui ne connaissent pas ce pattern, je vous invite à lire cet article : Angular Shared Scam
La disparition du rôle central du NgModule ne peut faire que du bien à Angular : simplicité du code, facilitée d’apprentissage. Le framework renforce son offre pour une approche micro-frontend, même si la migration sera longue compte tenu du legacy. Mais avec le caractère optionnel de cette fonctionnalité et des travaux encore en cours sur les standalone APIs, la “révolution” est annoncée, mais deviendra t’elle la norme ? Qu’en pensez-vous ?
Pour aller plus loin, je vous conseille cet article du blog Angular partageant la vision pour le futur du framework : Angular’s Vision for the future.
Réservez un moment avec notre équipe RH en quelques clics, pour voir ensemble le meilleur moyen de nous rejoindre. Vous avez des questions sur Delia Technologies ? C'est le moment de les poser !
Rencontrer notre équipe