Feature Modules - Les provinces du royaume

Les feature modules divisent l'application en parties logiques - comme les provinces du Japon féodal, chacune avec sa propre spécialisation.

Les types de modules

1. Feature Module (Province)

Regroupe une fonctionnalité métier :

1// features/samurai/samurai.module.ts
2@NgModule({
3  declarations: [
4    SamuraiListComponent,
5    SamuraiDetailComponent,
6    SamuraiFormComponent
7  ],
8  imports: [
9    CommonModule,
10    SharedModule,
11    SamuraiRoutingModule
12  ],
13  exports: [SamuraiListComponent]
14})
15export class SamuraiModule { }

2. Shared Module (Ressources communes)

Contient les éléments réutilisables :

1// shared/shared.module.ts
2@NgModule({
3  declarations: [
4    ButtonComponent,
5    CardComponent,
6    LoadingSpinnerComponent,
7    HighlightDirective,
8    TruncatePipe
9  ],
10  imports: [CommonModule],
11  exports: [
12    // On exporte TOUT ce qui peut être utilisé dans d'autres modules
13    CommonModule,
14    ButtonComponent,
15    CardComponent,
16    LoadingSpinnerComponent,
17    HighlightDirective,
18    TruncatePipe
19  ]
20})
21export class SharedModule { }

3. Core Module (Centre de commandement)

Les singletons et les éléments chargés une seule fois :

1// core/core.module.ts
2@NgModule({
3  imports: [
4    CommonModule,
5    HttpClientModule
6  ],
7  providers: [
8    AuthService,
9    LoggingService,
10    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
11  ]
12})
13export class CoreModule {
14  // Protection contre les imports multiples
15  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
16    if (parentModule) {
17      throw new Error('CoreModule already loaded. Import only in AppModule!');
18    }
19  }
20}

Structure des dossiers

1src/app/
2├── core/                      # Singleton services, guards, interceptors
3│   ├── core.module.ts
4│   ├── services/
5│   │   ├── auth.service.ts
6│   │   └── api.service.ts
7│   ├── guards/
8│   └── interceptors/
9│
10├── shared/                    # Reusable components, directives, pipes
11│   ├── shared.module.ts
12│   ├── components/
13│   ├── directives/
14│   └── pipes/
15│
16├── features/                  # Feature modules
17│   ├── samurai/
18│   │   ├── samurai.module.ts
19│   │   ├── samurai-routing.module.ts
20│   │   ├── components/
21│   │   ├── services/
22│   │   └── models/
23│   └── dojo/
24│
25├── app.module.ts
26├── app.component.ts
27└── app-routing.module.ts