我的应用程序有点大。它包含许多功能模块,大多数是延迟加载的。我想预加载一个延迟加载的模块,该模块包含在 forChild 路由中。
为此,我参考了 Angular 文档并遵循了他们的步骤。我提供了下面提到的自定义预加载策略服务。
这是我的自定义预加载策略文件:
@Injectable()
export class CustomPreloadingWithDelayStrategy implements PreloadingStrategy {
preload(route: Route, load: () => Observable<any>): Observable<any> {
if (route.data && route.data['preload']) {
return load();
} else {
return Observable.of(null);
}
}
}
应用路由文件,
const routes: Routes =
[
XXX,
{
path: '',
data: {
base: true
},
component: MyComp,
children: [
{
path: 'page1/:id',
loadChildren: 'XXXXXXX'
},
{
path: 'page2',
loadChildren: 'XXXXXXXX'
},
{
path: 'page3',
loadChildren: 'app/feature-modules/folder1/my-folder1-module#Folder1Module'
}];
@NgModule({
imports: [RouterModule.forRoot(routes, {useHash: true, preloadingStrategy: CustomPreloadingWithDelayStrategy})],
exports: [RouterModule],
entryComponents: [ ]
})
export class AppRoutingModule {}
我的文件夹1模块的路由文件:
const routes: Routes = [{
path: 'sub-page1/:data1/:data2',
loadChildren: 'app/feature-modules/sub-pages/pages/sub-page1.module#SubPage1Module'
}, {
path: 'sub-page2/:data1',
loadChildren: 'app/feature-modules/sub-pages/pages/sub-page2.module#SubPage2Module',
data: {preload: true}
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class Folder1RoutingModule {
}
所以当我打开这个路由/page3/sub-page1/data1/data2 时,SubPage2Module 将被预加载。但这并没有发生。
我花了将近 2 个小时来理解为什么即使我做对了一切,也没有预加载模块。
问题在于children
,任何定义并进一步分发children
路由都被视为正常路由,即使您在loadChildren
的帮助下在children
中定义了模块。preloadingStrategy
只需要模块进行预加载,而不是路径/路由。在子级下定义路由后,它会将其视为正常路由,并继续扫描loadChildren
提供的其他路由。以下是 Angular 与您的路线的解释:
const routes: Routes =
[
XXX, // Normal path
{
path: '',
data: {
base: true
},
component: MyComp,
children: [ // Normal path (no module) as children is used, move on
{
path: 'page1/:id',
loadChildren: 'XXXXXXX'
},
{
path: 'page2',
loadChildren: 'XXXXXXXX'
},
{
path: 'page3',
loadChildren: 'app/feature-modules/folder1/my-folder1-module#Folder1Module'
},
],
},
{ path: 'abc', loadChildren: '../path/to/module#AbcModule', data: { preload: true }} // Module found, preload it!
];
如果您在自定义CustomPreloadingWithDelayStrategy
中仔细调试,那么您将观察到您的路由 /page3/sub-page1/data1/data2 甚至无法弥补preload()
方法的route
参数,因为预加载完全是关于加载模块而不是加载路由。但是,我们的路线abc确实出现了!希望对:)有所帮助