Qu'est-ce qu'un NgModule ?

Question

IT Interview Practice · Accepted Answer

Un **NgModule** est une classe décorée avec `@NgModule` qui regroupe des composants, directives, pipes et services connexes dans un bloc cohérent, indiquant à Angular comment les compiler et les câbler ensemble. (Remarque : Angular moderne favorise de plus en plus les **composants standalone** par rapport aux NgModules, mais la compréhension des NgModules reste essentielle pour la plupart des bases de code existantes.)

## Anatomie d'un NgModule

```ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // components/directives/pipes THIS module owns
  imports: [CommonModule, FormsModule],                 // other modules whose exports we need
  exports: [UserListComponent],                          // what we make available to importers
  providers: [UserService],                              // services (DI) provided by this module
})
export class UsersModule {}
```

## Les quatre tableaux clés

```text
declarations → components, directives, and pipes that BELONG to this module
imports      → other NgModules whose exported features this module needs
exports      → the subset of declarations/modules made available to importers
providers    → services registered for dependency injection
```

Un composant ne peut être déclaré que dans **un** module, et doit être déclaré (ou importé en tant que standalone) pour être utilisable dans les templates de ce module.

## Le module racine

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // the root component to launch
})
export class AppModule {}
```

Chaque application (non-standalone) possède un `AppModule` racine avec un tableau `bootstrap` nommant le composant de démarrage.

## Modules de fonctionnalité et organisation

```text
AppModule (root) → imports → UsersModule, AdminModule, SharedModule
```

Les applications sont organisées en **modules de fonctionnalité** (un par domaine) et un **module partagé** (composants/pipes communs), maintenant la base de code modulaire et permettant le chargement lazy par fonctionnalité.

## Le passage au standalone

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // no NgModule needed
```

Angular moderne permet aux composants d'être **standalone** — déclarant leurs propres dépendances directement — réduisant ou éliminant le boilerplate NgModule.

## Pourquoi c'est important

Les NgModules sont le mécanisme traditionnel d'organisation et de câblage des dépendances d'Angular — la compréhension de `declarations`/`imports`/`exports`/`providers` est nécessaire pour naviguer la grande majorité des applications Angular existantes et pour comprendre le chargement lazy.

Bien que le nouveau code tende vers les composants standalone, la connaissance des NgModules reste essentielle pour le travail Angular dans le monde réel.

Anatomie d'un NgModule

Les quatre tableaux clés

Le module racine

Modules de fonctionnalité et organisation

Le passage au standalone

Pourquoi c'est important

Questions connexes