Quando creiamo un'applicazione Angular di piccole dimensioni, è molto probabile che servizi, component, pipe e altro ancora facciano parte di un unico modulo. Quando invece dobbiamo creare applicazioni di dimensioni maggiori, torna utile suddividere l'applicazione in moduli. Questi moduli possono essere caricati tutti in fase di inizializzazione dell'applicazione oppure in modalità lazy solo su richiesta. La prima modalità rende lo sviluppo lievemente più semplice, ma comporta lo svantaggio di dover caricare tutta l'applicazione in fase di startup. La seconda modalità invece permette di caricare i moduli solo su richiesta rendendo quindi lo startup più veloce.
Per caricare un modulo in modalità lazy, basta definirne le rotte dei component nel seguente modo.
const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'customers', loadChildren: './customers/customer.module#CustomerModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
La parte più interessante di questo esempio è il percorso customers. In questo caso specifichiamo che la rotta customers causa il caricamento del modulo CustomersModule presente nel file customers/customer.module il cui percorso parte dalla root dell'applicazione. A questo punto, alla partenza dell'applicazione il modulo CustomerModule non viene caricato velocizzando la partenza stessa.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare il versioning con i controller di ASP.NET Core Web API
Gestire domini wildcard in Azure Container Apps
Creare alias per tipi generici e tuple in C#
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Code scanning e advanced security con Azure DevOps
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
C# 12: Cosa c'è di nuovo e interessante
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Eseguire operazioni con timeout in React
Elencare le container images installate in un cluster di Kubernetes
Semplificare il deployment di siti statici con Azure Static Web App
Gestire undefined e partial nelle reactive forms di Angular