如何防止延迟从 angular 中的 Routes 数组加载路径

Question

我实现了延迟加载。分为模块。并设置路线。一切正常。

我对模块加载的顺序有疑问。我注意到，如果我尝试加载路由列表中的任何模块，它会先加载它上面的所有模块。

例如：如果我尝试加载 ActionModule，那么它会加载其上方的所有模块（或经过其上方的所有路由），然后再执行操作，这会导致延迟。

我能否以某种方式更改路由，使其只加载所需的模块？

这是我的 routing.ts

和 browser network tab 这显示了我的问题。

//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
});

提前致谢。

Answer 1

因此，虽然我不确定浏览器网络选项卡的含义：

是否在正确模块之前加载所有模块

或

~~是否只是搜索所有先前的模块，以找到正确的模块~~（针对语法进行了编辑）
是否只是搜索所有先前的路线，以到达正确的模块路线

我们永远不会知道：无论如何，我通过添加加载 spinner/indicator :)

解决了这个问题

如何防止延迟从 angular 中的 Routes 数组加载路径

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

angular7

angular7-router