Currently, in my project, I observed glitch and slowness when I change one page to another with a lazy loading strategy. Is there a way I can make this faster and smooth transition in between? Here is my routing code,
const routes: Routes = [ { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) }, { path: 'items', loadChildren: () => import('./items/items.module').then(m => m.ItemsModule) } ];
The Glitch and slowness is due to when you route to some model then only it loads its module assets and code, so you can preload your module when the app is initiated using the preloadingStrategyin the router config.
preloadingStrategy
const routes: Routes = [ { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }, { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) } ]; @NgModule({ imports: [CommonModule, RouterModule.forRoot(Routes, { preloadingStrategy: PreloadAllModules })], exports: [RouterModule] }) export class AppRoutingModule {}
You can also preload the defined module only : get deep knowledge on preloading modules: Best Ways To Preload modules In Angular 9