Les NgModules - Le système des clans

Dans le Japon féodal, chaque clan (han) avait sa propre structure, son territoire et ses ressources. Dans Angular, les modules jouent un rôle similaire - ils regroupent des éléments liés et définissent leur portée.

Que sont les NgModules ?

Les NgModules sont des conteneurs organisationnels dans Angular. Bien que les Standalone Components soient préférés depuis Angular 17+, connaître les modules reste essentiel pour :

• Travailler sur des projets existants
• Comprendre l'architecture d'Angular
• Le lazy loading (encore très répandu avec les modules)

L'anatomie d'un NgModule

1import { NgModule } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { FormsModule } from '@angular/forms';
4
5// Composants de ce module
6import { SamuraiListComponent } from './samurai-list.component';
7import { SamuraiCardComponent } from './samurai-card.component';
8import { SamuraiDetailComponent } from './samurai-detail.component';
9
10// Services
11import { SamuraiService } from './samurai.service';
12
13@NgModule({
14  // Composants, directives, pipes appartenant à ce module
15  declarations: [
16    SamuraiListComponent,
17    SamuraiCardComponent,
18    SamuraiDetailComponent
19  ],
20
21  // Autres modules nécessaires
22  imports: [
23    CommonModule,  // *ngIf, *ngFor, async pipe, etc.
24    FormsModule    // ngModel, formulaires pilotés par template
25  ],
26
27  // Éléments partagés avec d'autres modules
28  exports: [
29    SamuraiListComponent,
30    SamuraiCardComponent
31  ],
32
33  // Services disponibles dans ce module (approche historique)
34  providers: [
35    SamuraiService
36  ]
37})
38export class SamuraiModule { }

Attention à partir d'Angular 19 : les composants sont standalone par défaut, et un tel composant ne peut pas figurer dans declarations - le compilateur signale l'erreur NG6008. Un composant qui appartient à un NgModule doit porter standalone: false dans son décorateur ; un composant standalone s'ajoute à un module via imports.

Les propriétés du décorateur @NgModule

AppModule - Le château central

1// app.module.ts - module principal de l'application
2@NgModule({
3  declarations: [AppComponent],
4  imports: [
5    BrowserModule,      // Requis pour les applications navigateur
6    AppRoutingModule,   // Routage
7    SamuraiModule,      // Notre feature module
8    DojoModule
9  ],
10  providers: [],
11  bootstrap: [AppComponent]  // Composant de démarrage
12})
13export class AppModule { }

Vois un module comme un clan : declarations désigne les guerriers qui lui appartiennent, imports scelle les alliances avec les autres clans, exports prête tes forces à l'extérieur - et AppModule, avec son champ bootstrap, est le château d'où part toute l'application.

1import { Component } from '@angular/core';
2import { SamuraiModule } from './samurai/samurai.module';
3
4@Component({
5  selector: 'app-root',
6  standalone: true,
7  imports: [SamuraiModule],
8  template: `
9    <div class="dojo">
10      <header>
11        <h1>Clans et provinces</h1>
12        <p>Module 3 : l’organisation du code dans Angular</p>
13      </header>
14
15      <main>
16        <section class="info-panel">
17          <h2>Structure des modules</h2>
18          <p>Les clans (modules) organisent les guerriers (composants) en groupes logiques.</p>
19          <ul>
20            <li>Feature Modules - fonctionnalités</li>
21            <li>Shared Modules - éléments partagés</li>
22            <li>Core Module - services singletons</li>
23          </ul>
24        </section>
25
26        <section class="demo-panel">
27          <h2>Clan des samouraïs (Feature Module)</h2>
28          <app-samurai-list></app-samurai-list>
29        </section>
30      </main>
31    </div>
32  `,
33  styles: [`
34    .dojo {
35      font-family: 'Segoe UI', sans-serif;
36      max-width: 900px;
37      margin: 0 auto;
38      padding: 20px;
39      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
40      min-height: 100vh;
41      color: #eee;
42    }
43    header {
44      text-align: center;
45      border-bottom: 2px solid #c9a227;
46      padding-bottom: 20px;
47    }
48    h1 { color: #c9a227; }
49    h2 { color: #c9a227; }
50    .info-panel, .demo-panel {
51      background: rgba(255,255,255,0.05);
52      border: 1px solid #c9a227;
53      border-radius: 8px;
54      padding: 20px;
55      margin: 20px 0;
56    }
57    ul { list-style: none; padding: 0; }
58    li::before { content: "» "; }
59  `]
60})
61export class AppComponent {}