Pubblicato il 17/02/2024 da alnao nella categoria Angular & Ionic

Nei progetti Angular i Moduli sono gruppi di componenti di una applicazione, il raggruppamento permette di gestire le importazioni di altri moduli e la gestione del comportamento i unico punto dichiarativo dove vengono elencati i componenti, altri moduli importati e i providers (come gli interceptor), per esempio nella applicazioni presentate in altri articoli è stato creato un modulo di default dalla procedura guidata di creazione dei progetti:

@NgModule({
  declarations: [
    AppComponent,
    FilmsListComponent,
    FilmDetailComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule, 
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [{
    provide: HTTP_INTERCEPTORS, 
    useClass: AuthInterceptorServiceService,
    multi: true
  }],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]
}) export class AppModule { }

in questo caso tutti i componenti non devono importare i moduli dichiarati nella sezione imports e quindi risulta molto più snello e semplice.

Tuttavia nei progetti di grandi dimensioni questa tecnica presenta alcune limitazioni: la sezione dichiarativa può diventare molto grande e complessa, inoltre tutti i moduli usati nella applicazione risultano condivisi tra tutti i componenti anche quelli che non li usano. Per risolvere questo problema esisono due strade: dichiarare diversi moduli separando i componenti e gli import a seconda delle necessità rendendo molto snello il codice ma anche in questo caso si richiesta il disordine causato dal proliferare di classi di questo tipo.

La tecnica alternativa più usata è l’uso dei componenti con la caratteristica standalone, questa permette di definire componenti che importano in autonomia i moduli senza dover dichiarare l’elenco dei moduli nella classe generica. Per creare componenti di questo tipo si può usare la sintassi

ng g c component_name --standalone

Un semplice esempio mostra come la sintassi implementa questa tecnica:

@Component({
  standalone: true, 
  selector: 'photo-gallery',
  // an existing module is imported directly into a standalone component
  imports: [MatButtonModule],
  template: `
...
  <button mat-button>Next Page</button>
`,
})
export class PhotoGalleryComponent {
  // logic
}

In questo semplice esempio presentato nella documentazione ufficiale  è possibile vedere come aggiungendo la proprietà standalone si può aggiungere una sezione imports specifica nella dichiarazione delle annotation del componente. Sempre nel sito ufficiale esiste anche una pagina specifica dedicata alla migrazione da componenti modulari a componenti standalone.

MENU