延迟加载独立组件进行路由时预加载所有组件

Question

随着 Angular 17 中独立组件的使用，我们可以直接延迟加载组件，而不是使用模块。但问题是在这种情况下如何预加载？之前在延迟加载模块时我们使用了这个策略：withPreloading(PreloadAllModules)。我们是否有独立组件的等效工具，或者它是否也可以无缝地用于独立组件？

示例：

export const routes: Routes = [
  {
    path: 'home',
    loadComponent: () =>
      import('./components/home/home.component').then((m) => m.HomeComponent)
  },
  {
    path: 'standalone-sample',
    loadComponent: () =>
      import('./components/standalone-sample/standalone-sample.component').then((m) => m.StandaloneSampleComponent),
    loadChildren: () =>
      import('./app.standlone-sample-routes').then((m) => m.STANDALONE_SAMPLE_ROUTES)
  },
  {
    path: 'standalone-sample1',
    loadComponent: () =>
      import('./components/standalone-sample1/standalone-sample1.component').then((m) => m.StandaloneSample1Component),
    loadChildren: () =>
      import('./app.standalone-sample1-routes').then((m) => m.STANDALONE_SAMPLE1_ROUTES)
  },
  { path: '**', redirectTo: 'home', pathMatch: 'full' }
];

app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withPreloading(PreloadAllModules))
]}

问题： 当用户访问 /home 路由时，会获取 src_app_home.js 包。当用户访问 /standalone-sample 路由时，会获取 src_app_standalone_sample.js 包。

我想要什么？ 当用户访问 /home 路由时，会获取 src_app_home.js 包，并在后台发布其余路由包也会被获取并保留，src_app_standalone_sample.js 和 src_app_standalone_sample1.js。

早些时候，我们使用模块而不是独立组件来实现延迟加载。这个用例是通过使用“PreloadAllModules”来填充的。 我们可以继续使用 PreloadAllModules 还是针对此用例有其他解决方案？

我查看了 Angular 文档，找不到这方面的任何相关信息。

Answer 1

我无法评论这个问题（没有足够的声誉点）。所以这可能不是答案。

  {
    path: 'standalone-sample1',
    loadComponent: () =>
      import('./components/standalone-sample1/standalone-sample1.component').then((m) => m.StandaloneSample1Component),
    loadChildren: () =>
      import('./app.standalone-sample1-routes').then((m) => m.STANDALONE_SAMPLE1_ROUTES)
  }

对于上述代码，当导航到

standalone-sample1

路线时，仅加载

StandaloneSample1Component

，不包括其子项。

在

app.routes.ts

中使用：

 {
    path: 'standalone-sample',
    loadChildren: () =>
      import('./app.standlone-sample-routes').then((m) => m.routes)
  },

在

./app.standalone-sample1-routes

中使用：

export const routes: Routes = [
  {
    path: '', pathMatch: 'prefix', component: StandaloneSample1Component,
    children: [
      { path: 'route1', component: SAAComponent, title: 'SAA Component' },
      { path: 'route2', component: SABComponent, title: 'SAB Component' },
      { path: 'route3', component: SACComponent, title: 'SAC Component' }
    ]
  }
];