angular - 延迟加载模块的 Angular PreloadAllModules 不起作用

Question

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

现在我想让上面的模块预加载，这可以简单地通过添加来完成

{ preloadingStrategy: PreloadAllModules }

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

---

这是如何实现的

app.module.ts

@NgModule({
 imports: [LazyLoadModule]
})

延迟加载.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);
    }
}

延迟加载.module.ts

{ preloadingStrategy: PreloadingStrategyService }

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

Answer 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]
})

Answer 2

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

在这里找到