Angular 惰性加载模块的 PreloadAllModules 不工作

Question

我已经成功地为我的模块 Products 和 Customers 实现了延迟加载，当我导航到各自的路由。

现在我想预加载以上模块，只需添加

即可

{ preloadingStrategy: PreloadAllModules }

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

这是实现的方式

app.module.ts

@NgModule({
 imports: [LazyLoadModule]
})

懒-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 中添加配置，那么它似乎可以工作（我可以在初始加载时看到各个块），但是我的路由路径不起作用。

更新

首先我尝试使用自定义预加载策略，像这样

预加载-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);
    }
}

懒-load.module.ts

{ preloadingStrategy: PreloadingStrategyService }

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

Answer 1

把你的惰性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.json中的module: "commonjs"引起的，应该是module: "ESNext".

Angular 惰性加载模块的 PreloadAllModules 不工作

Angular PreloadAllModules for lazyloaded modules is not working

angular

angular7

jhipster

angular-lazyloading