Preload all components when lazy loading standalone components for routing

Question

With the usage of standalone components in angular 17, instead of using modules we can directly lazyLoad components. But the issue is how to preload in this case? Earlier when lazy loading modules we used this strategy:
withPreloading(PreloadAllModules). Do we have an equivalent for that for standalone components or will it also work seamlessly for standalone components?

Example:

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

Problem: When user visits /home route, src_app_home.js bundle gets fetched. When user visits /standalone-sample route, src_app_standalone_sample.js bundle is fetched.

What I want? When user visits /home route, src_app_home.js bundle is fetched, post that in the background the rest of the route bundles are fetched and kept as well, src_app_standalone_sample.js and src_app_standalone_sample1.js.

Earlier when were using modules instead of standalone components to attain lazy-loaading. This use-case was filled by the use of 'PreloadAllModules'. Can we continue using PreloadAllModules or do we have some other solution for this use case ?

I looked into Angular documentation could not fine any relevant information in this regard.

Answer 1

I can't comment on the question(don't have enough reputation points). So this might not be the answer.

  {
    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)
  }

For the above code, when navigating to the standalone-sample1 route, only the StandaloneSample1Component is loaded, excluding its children.

In app.routes.ts use:

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

In ./app.standalone-sample1-routes use:

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' }
    ]
  }
];