Caricare in lazy loading un modulo Angular

di Stefano Mostarda, in HTML5, Angular,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi