How can I prevent Delay in loading a path from the Routes array in angular

Question

I have lazy loading implemented. Divided into modules. And set up the routes. Everything is working.

I have doubt regarding the order of module loading. I noticed that, if I try to load any module down in the list of routes, it loads all modules above it first.

for eg: if I try to load ActionModule, then it loads all modules above it (or goes through all the routes above it), before coming to action, and this causes delay.

Can I change the routes in some way, that it loads only the required module?

Here's my routing.ts

and browser network tab which shows my problem.

//routing.ts(in text format)
export const routes: Routes = [
    { path: '', loadChildren: './pages/login/login.module#LoginModule' },
    {
    path: '',
    component: PagesComponent, children: [
 
        { path: 'blank', component: BlankComponent, data: { breadcrumb: '' }, canActivate: [AuthGuard] },
        { path: 'dashboard', component: DashBoardComponent, data: { breadcrumb: '' }, canActivate: [AuthGuard] },
        { path: 'iframedashboard', component: iframeDashBoardComponent, data: { breadcrumb: 'Iframe Dashboard' }, canActivate: [AuthGuard] },
         
        { path: '', loadChildren: './pages/operations2/order-maintenance/order.module#OrderModule'},
 
        { path: '', loadChildren: './pages/administration/administration.module#AdministrationModule'},
        { path: '', loadChildren: './pages/base/base.module#BaseModule'},
        { path: '', loadChildren: './pages/cms/cms.module#CMSModule'},
        { path: '', loadChildren: './pages/operations/operation.module#OperationModule'},
        { path: '', loadChildren: './pages/system-setup/system-setup.module#SystemSetupModule'},

        { path: '', loadChildren: './pages/operations2/ordertemplate/order-template.module#OrderTemplateModule'},
        { path: '', loadChildren: './pages/operations2/upload-file/upload-file.module#UploadFileModule'},
        { path: '', loadChildren: './pages/operations2/order-trace/order-trace.module#OrderTraceModule'},

        { path: '', loadChildren: './pages/system-setup2/action/action.module#ActionModule'},// 
        { path: '', loadChildren: './pages/system-setup2/rule-groups-maintenances/rule-group.module#RuleGroupModule'},
        { path: '', loadChildren: './pages/system-setup2/rule/rule.module#RuleModule'},
        { path: '', loadChildren: './pages/system-setup2/workcellType/work-cell-type.module#WorkCellTypeModule'},
        { path: '', loadChildren: './pages/system-setup2/channel-maintenance/channel-maintenance.module#ChannelMaintenanceModule'},
        { path: '', loadChildren: './pages/system-setup2/shift-calendar/shift-calendar.module#ShiftCalendarModule'},

        { path: '', loadChildren: './pages/system-setup3/system-setup3.module#SystemSetup3Module'}

    ]
},
{ path: 'error', component: ErrorComponent, data: { breadcrumb: 'Error' } },
{ path: '**', component: NotFoundComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
    // preloadingStrategy: PreloadAllModules,  // <- comment this line for activate lazy load
    // useHash: true
});

Thanks in advance.

Answer 1

So, while I'm not sure what the browser network tab means:

Is it loading all the modules prior to the correct module

OR

Is it just searching through all prior modules, to get to the correct module (Edited for grammer)
Is it just searching through all prior routes, to get to the correct module route

We'll never know: Anyways I solved this problem by adding a loading spinner/indicator :)