延迟加载模块的 Angular PreloadAllModules 不起作用答案

【问题标题】：Angular PreloadAllModules for lazyloaded modules is not working延迟加载模块的 Angular PreloadAllModules 不起作用
【发布时间】：2020-06-01 09:16:33
【问题描述】：

我已经成功地为我的模块 Products 和 Customers 实现了延迟加载，并且当我导航到相应的路由时我能够看到这些块。

现在我想让上面的模块预加载，只需添加

即可

{ preloadingStrategy: PreloadAllModules }

但这不起作用，上述模块仍在延迟加载（当我导航到各个模块而不是初始加载时正在加载块）。

这是如何实现的

app.module.ts

@NgModule({
 imports: [LazyLoadModule]
})

lazy-load.module.ts

@NgModule({
    imports: [RouterModule.forRoot([{
        path: 'products',
        data: {
            preload: false
        },
        loadChildren: './entities/products/products.module#ProductsModule',
    },
    {
        path: 'customers',
        data: {
            preload: true
        },
        loadChildren: './entities/customers/customers.module#CustomersModule',
    }], { useHash: true, preloadingStrategy: PreloadAllModules })]
})

但是，如果我直接在app.module.ts 中添加配置，那么它似乎可以工作（我可以在初始加载时看到各个块），但是我的路由路径不起作用。

更新

首先我尝试了自定义预加载策略这样

preloading-strategy.service.ts

@Injectable()
export class PreloadingStrategyService implements PreloadingStrategy {

    preload(route: Route, load: () => Observable<any>) {
        console.log('Preloading called');
        return route.data && route.data.preload ? load() : of(null);
    }
}

lazy-load.module.ts

{ preloadingStrategy: PreloadingStrategyService }

但是 preload 方法永远不会被调用（没有打印控制台日志），所以出于测试目的我添加了 PreloadAllModules。正如我上面已经解释的那样，这也不起作用。

【问题讨论】：

你能提供一个最小的堆栈闪电战吗？
@AakashGarg 我尝试在独立项目中复制它，但没有问题（工作正常）。问题出在我的项目上。
在惰性模块中你不应该使用 forChild 而不是 forRoot 吗？我也可以看到预加载标志为假。在任何其他模块中您正在使用任何预加载策略？
@AakashGarg 是的，我的最终目标是创建 自定义预加载策略 服务，但这不起作用（从未在调试器中调用/停止）。所以我添加了 PreloadAllModules。是的，我在 Products 和 Customers 模块中使用了forChild
coryrylan.com/blog/…

标签： angular angular7 jhipster angular-lazyloading

【解决方案1】：

把你的lazy-load.module.ts改成

@NgModule({
    imports: [RouterModule.forRoot([{
        path: 'products',
        data: {
            preload: false
        },
        loadChildren: './entities/products/products.module#ProductsModule',
    },
    {
        path: 'customers',
        data: {
            preload: true
        },
        loadChildren: './entities/customers/customers.module#CustomersModule',
    }], { useHash: true, preloadingStrategy: PreloadAllModules })],
    exports: [RoutingModule]
})

【讨论】：

你的意思是RouterModule ?。将其添加到导出中，但模块仍在延迟加载（在为两个模块导航时正在加载块）。
您需要提供适当的堆栈闪电战。找不到像这样的实际问题区域。

【解决方案2】：

问题是由tsconfig.json中的module: "commonjs"引起的，应该是module: "ESNext"。

Found here

【讨论】：