Angular Loading time on menu click

Question

When I click on the menu item it takes too much time to load

This is my app-routing-modules.ts

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'login',
        loadChildren: () => import('./pages/login/login.module').then(m => m.LoginModule)
      },
      {
        path: 'products',
        loadChildren: () => import('./pages/products/products.module').then(m => m.ProductsModule)
      },
      {
        path: 'retailer-home',
        loadChildren: () => import('./pages/retailer-home/retailer-home.module').then(m => m.RetailerHomeModule)
      },
   ]
  }
];

This is my product-routing-module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductsComponent } from './products.component';

const routes: Routes = [
  { path: '', component: ProductsComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class ProductsRoutingModule {}

First time when I clicked on the menu it took too much time to load.

This is Network tab

Naren Murali · Accepted Answer · 2024-05-22 16:16:32Z

0

Since you are using lazy loading the js files are fetched only when the route is accessed, maybe that is the cause of the delay, one common way to speed up this, is to preload all the modules, so that as the website loads, the modules are preloaded in the background and may lessen this effect of waiting!

Preloading article

import { NgModule } from '@angular/core';
import {Routes, RouterModule, PreloadAllModules} from '@angular/router';

@NgModule({
  imports: [RouterModule.forChild(routes, {
      preloadingStrategy: PreloadAllModules // <-changed here!
  })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

answered May 22, 2024 at 16:16

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Loading time on menu click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related