How to make smooth transition when we change one lazy route to another in angular 9?

💬 Tech Talks › Category: Angular 10 › How to make smooth transition when we change one lazy route to another in angular 9?
0 Vote Up Vote Down
Inaam Husain Staff asked 3 years ago

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)
  }
];
Question Tags: , , ,
1 Answers
1 Vote Up Vote Down
Rehmaanali Staff answered 3 years ago

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.

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

Signup to Post Answer