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

Prima o poi, tutto inizia a diventare disordinato — è 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?

Considerare un modulo come una scatola in cui si conserva tutto ciò che è relativo a una funzionalità specifica. Ad esempio, tutti gli elementi relativi agli utenti possono essere inseriti in un UserModule.

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

Significato di ciascuna parte:

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

• imports – importa altri moduli da cui questo 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).

In sostanza, un modulo definisce ciò che riceve (le sue dipendenze), ciò che rende disponibile 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 utilizziamo i moduli

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

Questi permettono di creare e utilizzare un componente senza inserirlo in alcun 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 enterprise 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.