Search for a command to run...
Très intéressant comme article. J'en ai entendu parlé mais j'ai jamais réellement compris. Merci pour cette explication.
Merci pour ton feedback 😁 Heureux de t'avoir pu être utile à travers cet article !
Depuis l'arrivée des Signals dans Angular, une question revient sans cesse dans les équipes : comment continuer à profiter de la puissance de RxJS, de ses opérateurs, de sa gestion fine des flux async
Si vous suivez l'actualité d'Angular avec la sortie de la version 20 du framework, vous avez probablement entendu de plus en plus ce terme. Mais au-delà du jargon, qu'est-ce que le Zoneless concrètement pour vos applications Angular ? Pourquoi est-il...
Si vous avez l’habitude de manipuler des formulaires réactifs (Reactive Forms) dans un projet Angular, vous connaissez certainement la méthode patchValue(…). Cette méthode, permet de mettre à jour les valeurs de votre formulaire. Cependant, son utili...
Depuis la sortie de la version 17 du framework Angular, on parle de la renaissance de Angular. Il y a eu beaucoup de changements majeurs depuis la version 16 du framework pour préparer le terrain à cette renaissance. Ces changements majeurs ont rendu...
Dans notre précédent article, nous avons vu ensemble ce qu'est un Signal Input et comment l'utiliser. Nous avons particulièrement remarqué sa similarité avec le décorateur @Input(). Dans ce nouvel article, nous verrons ensemble un nouveau type de inp...
Depuis la version 14, une nouveauté a fait son apparition dans le framework Angular qui par la suite est devenue stable dans la version 15. Il s'agit des composants autonomes (standalone component en anglais).
Afin de comprendre l'utilité des composants autonomes, analysons ensemble l'architecture d'un projet Angular avant leur arrivée.
Angular est un framework modulaire c'est-à-dire que chaque composant est rattaché à un module et les modules reliés entre eux donnent naissance à notre application web. Ceci est possible grâce à NgModule que nous retrouvons dans tous nos modules.
En effet, NgModule nous permet d'indiquer à notre composant toutes les dépendances dont il a besoin pour bien fonctionner. Nous nous retrouvons donc avec plein de modules dans nos projets parce que même le plus insignifiant des composants a besoin d'un module.
Après de longues discussions au sein de la core team, ils ont décidé de créer les composants autonomes. Cette autonomie permet aux composants d'avoir les mêmes aptitudes qu'un module en plus d'être des composants. Tout ceci est possible grâce à un seul attribut qu'on glisse dans le décorateur @Component de notre composant :
@Component({
standalone: true,
imports: [MatButtonModule],
...
})
export class PhotoGalleryComponent {
// logic
}
standalone est l'attribut a ajouté dans notre composant pour le rendre autonome.
imports est l'attribut qui permet de rattacher des modules existants à notre composant autonome en se référant au fonctionnement du NgModule.
Nous remarquons qu'il est également possible d'importer des modules existants dans notre composant autonome. C'est super ça !
Cependant, une question se pose. Nous utilisons nos modules pour faire du chargement paresseux (lazy-loading) au niveau de notre système de routes ce qui améliore évidemment les performances de nos applications. Y a t-il un moyen de le faire si nous avons un composant autonome ?
La core team de Angular a pensé à tout !
Effectivement, il y a un moyen de rendre nos composants paresseux. Voici quelques exemples provenant de la documentation de Angular :
export const ROUTES: Route[] = [
{path: 'admin', loadComponent: () => import('./admin/panel.component').then(mod => mod.AdminPanelComponent)},
// ...
];
// In the main application:
export const ROUTES: Route[] = [
{path: 'admin', loadChildren: () => import('./admin/routes').then(mod => mod.ADMIN_ROUTES)},
// ...
];
// In admin/routes.ts:
export const ADMIN_ROUTES: Route[] = [
{path: 'home', component: AdminHomeComponent},
{path: 'users', component: AdminUsersComponent},
// ...
];
// In the main application:
export const ROUTES: Route[] = [
{path: 'admin', loadChildren: () => import('./admin/routes')},
// ...
];
// In admin/routes.ts:
export default [
{path: 'home', component: AdminHomeComponent},
{path: 'users', component: AdminUsersComponent},
// ...
] as Route[];
Comment transformer une application déjà existante en une application de composants autonomes ?
Pour ce faire, nous avons une ligne de commande toute fournie. Il suffit de faire ceci :
ng generate @angular/core:standalone
Après l'exécution de cette commande, nous aurons une série de questions qui nous aiderons à faire le choix propice à notre besoin.
Pour finir, nous aborderons un peu les bonnes pratiques liées à cette nouveauté. Il s'agira d'identifier quand est-ce qu'il est pertinent d'utiliser un composant autonome ou non ?
Personnellement, je conseillerai l'utilisation du standalone component lorsque nous avons un module qui pilote par exemple un seul composant. Si des composants se partagent des dépendances communes, l'idéal serait de les faire regrouper dans un module afin d'avoir un code plus lisible et bien structuré.
En somme, nous avons vu ce que c'est qu'un composant autonome (standalone component en anglais), quel est son utilité et dans quel cas il faut l'utiliser.
Il est toutefois possible d'indiquer par défaut dans un projet Angular que nous voulons utiliser que des composants autonomes. Nous devons modifier le fichier angular.json au niveau des schematics et faire ceci :
...
"projects": {
"my-project": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"standalone": true
}
}
}
...
Pour ceux qui aimeraient créer des composants autonomes, servez-vous ici :
ng generate component --standalone card
Pour plus d'informations 👉 Standalone Components