Imaginez que vous construisez une application. Au début, il ne s'agit que d'un seul fichier — comme main.ts. Mais au fur et à mesure, vous ajoutez davantage : des composants, des services, des styles, de la logique, de la gestion de données, de l'authentification, etc.

Tôt ou tard, tout commence à devenir confus — il devient difficile de savoir ce qui est utilisé où ou comment tout est connecté.

C'est alors que la modularité devient votre meilleure alliée.

Qu'est-ce qu'un module dans Angular ?

Considérez un module comme une boîte où vous regroupez tout ce qui concerne une fonctionnalité spécifique. Par exemple, tous les éléments liés à l'utilisateur peuvent être placés dans un UserModule.

Dans Angular, un module est simplement une classe annotée avec le décorateur @NgModule, comme ceci :

Voici le rôle de chaque partie :

• declarations : liste les composants, directives et pipes appartenant à ce module ;

• imports : importe les autres modules dont celui-ci dépend (comme BrowserModule pour l'accès au DOM) ;

• providers : déclare les services (pour l'injection de dépendances) disponibles dans ce module ;

• bootstrap : définit le composant principal à charger au démarrage de l'application (généralement AppComponent).

En résumé, un module définit ses dépendances, ce qu'il met à disposition des autres modules, etc.

Tout composant interagissant avec ce module peut utiliser les services et autres ressources qu'il fournit.

Pourquoi nous n'utilisons pas les modules pour l'instant

Depuis Angular 14, il existe une nouvelle alternative — les composants autonomes.

Ceux-ci permettent de créer et d'utiliser un composant sans l'intégrer dans un module. Nous les avons d'ailleurs utilisés tout au long de notre projet, et ils ressemblent à ceci :

Il s'agit d'un composant autonome — ce qui signifie qu'il n'a pas besoin d'être listé dans les déclarations d'un NgModule. À la place, tout ce dont il a besoin (comme les directives, pipes ou autres modules) est importé directement via la propriété imports à l'intérieur du composant lui-même.

Cela rend la structure de votre projet plus légère et plus flexible — particulièrement utile pour les petites applications ou les blocs de fonctionnalités isolés.

Même si les nouveaux projets Angular n'exigent plus l'utilisation de modules, vous les rencontrerez encore fréquemment :

• Les anciennes applications d'entreprise sont entièrement construites avec des modules ;

• De nombreux tutoriels, documentations et exemples utilisent encore NgModule ;

• Certaines bibliothèques tierces et frameworks d'interface utilisateur reposent toujours sur l'approche basée sur les modules.