Che cos'è un NgModule?

Question

Accepted Answer

Un **NgModule** è una classe decorata con `@NgModule` che raggruppa componenti, direttive, pipe e servizi correlati in un blocco coesivo, dicendo ad Angular come compilarli e collegarli insieme. (Nota: l'Angular moderno favorisce sempre più i **standalone components** rispetto agli NgModules, ma la comprensione degli NgModules rimane comunque essenziale per la maggior parte dei codebase esistenti.)

## Anatomia di 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 {}
```

## I quattro array chiave

```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 componente può essere dichiarato in **un solo** modulo e deve essere dichiarato (o importato come standalone) per essere utilizzabile nei template di quel modulo.

## Il modulo radice

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

Ogni app (non-standalone) ha una `AppModule` radice con un array `bootstrap` che nomina il componente di avvio.

## Moduli funzionali e organizzazione

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

Le app sono organizzate in **moduli funzionali** (uno per area di dominio) e un **modulo condiviso** (componenti/pipe comuni), mantenendo il codebase modulare e abilitando il lazy loading per funzionalità.

## Il passaggio a standalone

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

L'Angular moderno consente ai componenti di essere **standalone** — dichiarando direttamente le proprie dipendenze — riducendo o eliminando il boilerplate di NgModule.

## Perché è importante

Gli NgModules sono il meccanismo tradizionale di organizzazione e wiring delle dipendenze di Angular — comprendere `declarations`/`imports`/`exports`/`providers` è necessario per navigare la grande maggioranza delle app Angular esistenti e per comprendere il lazy loading.

Sebbene il nuovo codice tenda verso i componenti standalone, la conoscenza di NgModule rimane essenziale per il lavoro Angular nel mondo reale.