无法在网络选项卡中看到延迟加载的模块

Question

我已经开始将我的 angular 应用程序从基于组件的应用程序转换为基于模块的应用程序，以提高应用程序性能。因此，为此我实现了延迟加载，奇怪的是代码对于延迟加载工作正常，我能够在命令提示符中看到延迟块文件，如下所示：

但是当我尝试调试这些模块时，这些模块的问题不是延迟加载，然后所有这些模块都加载到初始页面 laod，即 onload。我的意思是初始页面加载我能够看到所有这些延迟加载的模块。我在每个模块中做了一些 console.log 来查看它们是否延迟加载。奇怪的是，所有这些都在初始页面加载时加载。这不应该是延迟加载概念的预期行为。

请参阅下面我的代码片段：

app-routing.module.ts

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

const AppRoutes: Routes = [
  { path: '', redirectTo: '/app/projects', pathMatch: 'full' },
];

export const AppRoutingModule = RouterModule.forRoot(AppRoutes, { useHash: true, relativeLinkResolution: 'legacy' });

布局-routing.module.ts

 const routes: Routes = [
    { path: '', redirectTo: '/app/projects', pathMatch: 'full' },
    { path: '', loadChildren: () => import('../membership/membership.module').then(m => m.MembershipModule) },
    {
        path: "app",
        component: LayoutComponent,
        canActivate: [AuthGuard],
        children: [
            { path: '', loadChildren: () => import('../security-categories/security-categories.module').then(m => m.SecurityCategoriesModule) },
            { path: '', loadChildren: () => import('../vault/vault.module').then(m => m.VaultModule) },
            { path: '', loadChildren: () => import('../scanners/scanners.module').then(m => m.ScannersModule) },
            { path: '', loadChildren: () => import('../apigateway/apigateway.module').then(m => m.ApigatewayModule) },
            { path: '', loadChildren: () => import('../activities/activities.module').then(m => m.ActivitiesModule) },
            { path: "", redirectTo: "/app/projects", pathMatch: "full" },
            { path: "dashboard", component: DashboardComponent },                
            { path: "projects", component: ProjectsListComponent },    
        ]
    },
    { path: '**', component: ErrorComponent }
];

export const LayoutRoutingModule = RouterModule.forChild(routes);

一个名为 apigateway.module.ts

的模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { MaterialComponentsModule } from '../shared/material-components.module';
import { ApiGatewayRoutes } from './apigateway.routing';
import { ApiGatewayComponent } from './components/api-gateway/api-gateway.component';
import { CloudApiGatewayComponent } from './components/cloud-apigateway/cloud-apigateway.component';
import { ApigatewayDialogCredsComponent } from './components/apigateway-dialog-creds/apigateway-dialog-creds.component';

@NgModule({
  declarations: [
    ApiGatewayComponent,
    CloudApiGatewayComponent,
    ApigatewayDialogCredsComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialComponentsModule,
    RouterModule.forChild(ApiGatewayRoutes)
  ]
})
export class ApigatewayModule { 
  constructor() {
    console.log('ApigatewayModule module');
  }
}

同样，我已经创建了所有剩余的模块，但是当我导航到应该延迟加载的特定模块路由时，网络选项卡中没有显示任何模块。谁能帮我看看这是怎么回事？

谢谢。

Answer 1

我认为问题可能是 paths 与 '' 匹配并且正在加载它们。

仅出于测试目的尝试以下配置：

children: [
            { path: 'abc', loadChildren: () => import('../security-categories/security-categories.module').then(m => m.SecurityCategoriesModule) },
            { path: 'def', loadChildren: () => import('../vault/vault.module').then(m => m.VaultModule) },
            { path: 'ghi', loadChildren: () => import('../scanners/scanners.module').then(m => m.ScannersModule) },
            { path: 'jkl', loadChildren: () => import('../apigateway/apigateway.module').then(m => m.ApigatewayModule) },
            { path: 'mno', loadChildren: () => import('../activities/activities.module').then(m => m.ActivitiesModule) },
            { path: "pqr", redirectTo: "/app/projects", pathMatch: "full" },
            { path: "dashboard", component: DashboardComponent },                
            { path: "projects", component: ProjectsListComponent },    
        ]

看看它们是否立即加载。如果他们这样做，您还应该确保您没有在 index.ts 文件中导出 modules。我最近解决了一个与此类似的问题，我使用 index.ts 进行导出并且组件是主包的一部分。但我认为您的问题很可能是 path: ''，我会为每个延迟加载的模块设置 url 值。

无法在网络选项卡中看到延迟加载的模块

Not able to see lazy loaded modules in network tab

lazy-loading

typescript

angular