如何防止延迟从 Routes 数组以角度加载路径答案

【问题标题】：How can I prevent Delay in loading a path from the Routes array in angular如何防止延迟从 Routes 数组以角度加载路径
【发布时间】：2022-04-14 18:18:41
【问题描述】：

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

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

例如：如果我尝试加载 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
});

提前致谢。

【问题讨论】：

标签： angular7 angular7-router

【解决方案1】：

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

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

或

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

我们永远不会知道：无论如何，我通过添加加载微调器/指示器解决了这个问题:)

【讨论】：