Question

我已经为模块产品和客户成功实现了延迟加载，当我导航到相应的路由时，我能够看到这些块。

现在，我希望上述模块预加载，只需添加

即可完成

{ 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 。正如我上面已经解释的那样，这也不起作用。

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

Found here

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

2 个答案: