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

Rapidement, la situation devient complexe — il devient difficile de savoir ce qui est utilisé où et comment tout est relié.

C'est à ce moment-là que la modularité devient essentielle.

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

Considérer un module comme une boîte où sont regroupés tous les éléments liés à une fonctionnalité spécifique. Par exemple, tous les éléments relatifs à 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 :

Explication de chaque partie :

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

• imports – importe d'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

À partir d’Angular 14, une nouvelle alternative est disponible : les composants autonomes.

Ceux-ci permettent de créer et d’utiliser un composant sans l’ajouter à 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 allège et rend la structure de votre projet 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 de modules, vous les rencontrerez encore fréquemment :

• Les anciennes applications d'entreprise sont entièrement construites à l'aide de modules ;

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

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