Wat is een NgModule?

Question

Accepted Answer

Een **NgModule** is een klasse versierd met `@NgModule` die gerelateerde componenten, richtlijnen, pijpen en services in een samenhangend blok groepeert en Angular vertelt hoe deze moeten worden gecompileerd en aan elkaar gekoppeld. (Opmerking: modern Angular geeft steeds meer de voorkeur aan **standalone components** boven NgModules, maar het begrijpen van NgModules is nog steeds essentieel voor de meeste bestaande codebases.)

## Anatomy of an 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 {}
```

## The four key arrays

```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
```

Een component kan slechts in **één** module worden verklaard en moet worden verklaard (of als standalone worden geïmporteerd) om in de sjablonen van die module bruikbaar te zijn.

## The root module

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

Elke (niet-standalone) app heeft een root `AppModule` met een `bootstrap` array met de naam van de startcomponent.

## Feature modules and organization

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

Apps zijn ingedeeld in **feature modules** (één per domeingebied) en een **shared module** (veelgebruikte componenten/pijpen), waardoor de codebase modulair blijft en lazy loading per feature mogelijk is.

## The shift to standalone

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

Modern Angular laat componenten **standalone** zijn — hun eigen afhankelijkheden direct declareren — waardoor of het elimineert van NgModule boilerplate wordt verminderd.

## Waarom het belangrijk is

NgModules zijn het traditionele organisatie- en afhankelijkheidsmechanisme van Angular — het begrijpen van `declarations`/`imports`/`exports`/`providers` is nodig om door de grote meerderheid van bestaande Angular-apps te navigeren en lazy loading te begrijpen.

Althans nieuwe code neigt naar standalone components, NgModule-kennis blijft essentieel voor praktisch Angular-werk.