Immagina di costruire un'applicazione. All'inizio, è solo un singolo file — come main.ts. Ma andando avanti, inizi ad aggiungere altri elementi: componenti, servizi, stili, logica, gestione dei dati, autenticazione e così via.

Prima o poi, le cose iniziano a diventare disordinate — è difficile capire cosa viene utilizzato dove o come tutto si collega.

È proprio in questi momenti che la modularità diventa la tua migliore alleata.

Che cos'è un modulo in Angular?

Pensa a un modulo come a una scatola in cui conservi tutto ciò che è relativo a una funzionalità specifica. Ad esempio, tutto ciò che riguarda l'utente potrebbe essere inserito in un UserModule.

In Angular, un modulo è semplicemente una classe contrassegnata dal decoratore @NgModule, come segue:

Ecco cosa fa ciascuna parte:

• declarations – elenca i componenti, le direttive e i pipe che appartengono a questo modulo;

• imports – importa altri moduli da cui questo modulo dipende (come BrowserModule per l'accesso al DOM);

• providers – dichiara i servizi (per l'iniezione delle dipendenze) disponibili in questo modulo;

• bootstrap – definisce il componente principale da caricare all'avvio dell'applicazione (di solito AppComponent).

Fondamentalmente, un modulo definisce quali dipendenze accetta, quali risorse rende disponibili ad altri moduli e così via.

Qualsiasi componente che interagisce con questo modulo può utilizzare i servizi e le altre risorse che esso fornisce.

Perché al momento non stiamo usando i moduli

A partire da Angular 14, esiste una nuova alternativa: i componenti standalone.

Questi permettono di creare e utilizzare un componente senza inserirlo in un modulo. Li abbiamo effettivamente utilizzati durante tutto il nostro progetto, e si presentano così:

Questo è un componente standalone — il che significa che non deve essere elencato in alcun NgModule sotto declarations. Invece, tutto ciò di cui ha bisogno (come direttive, pipe o altri moduli) viene importato direttamente tramite la proprietà imports all'interno del componente stesso.

Questo rende la struttura del progetto più leggera e flessibile — particolarmente utile per applicazioni di piccole dimensioni o blocchi di funzionalità isolati.

Anche se i progetti Angular più recenti non richiedono i moduli, li incontrerai comunque spesso:

• Le applicazioni aziendali più datate sono interamente costruite utilizzando i moduli;

• Molti tutorial, documentazioni ed esempi sono ancora scritti con NgModule;

• Alcune librerie di terze parti e framework UI utilizzano ancora l'approccio basato sui moduli.