Standalone components in Angular

Nelle precedenti sezioni abbiamo scandagliato i concetti fondamentali di Angular e li abbiamo accompagnati con esempi di codice. In questi esempi abbiamo sempre usato l’attributo imports passato al decoratore @Component per importare componenti, pipes ed altri elementi fondamentali da usare nel template. Tra le cose importabili abbiamo anche visto gli ng-modules, dei contenitori di dipendenze che possono essere importate in blocco.

Un’altra cosa presente in tutti gli esempi di component class visti, è l’attributo standalone: true passato al decoratore @Component; in questa sezione esauriremo quello che c’è da dire sugli ng-modules e vedremo come il team di Angular sta lavorando per alleggerire l’architettura generale del framework frontend.

Originariamente, un’app Angular era costituita da un NgModule radice, che dichiarava AppComponent e tutti gli altri componenti utilizzati e non provenienti da altri ng-modules. Quando le cose stavano così, la vita dei componenti era strettamente legata a quella dei loro ng-modules di appartenenza; questo approccio è chiaramente più rigido poiché obbliga intere famiglie di componenti a condividere contesto e dipendenze:

// sample NgModule
@NgModule({
  imports: [CommonModule],
  declarations: [AppComponent],
  exports: [AppComponent]
})
export class AppModule {}

Per semplificare questa struttura, con la versione 14 di Angular sono stati introdotti gli standalone components, definizione in realtà riduttiva poiché l’attributo standalone può essere applicato anche a direttive e pipes.
Uno standalone component (o directive, o pipe) non è altro che un componente che non ha bisogno di essere elencato tra le declarations di alcun NgModule.

Al momento Angular applica di default l’attributo standalone a tutti i componenti (o direttive, o pipes) creati usando ng generate; l’attributo standalone  è considerato true come default. È, quindi, necessario specificare quando si vuole che un componente non lo sia.

In pratica, per come stanno le cose ad oggi, ha senso creare un NgModule solo se si vuole intenzionalmente raggruppare una serie di elementi, per facilitarne il consumo. La documentazione ufficiale di Angular, comunque, consiglia di utilizzare tutti componenti standalone.