Is it possible to preload standalone components in Angular?

Question

I am studying Angular for the first time and I saw that from version 15, standalone components were introduced. I know that it is possible to apply lazy loading with loadComponent and import, but can preloading be applied? {path: 'pesquisa', loadComponent: () => import('./componentes/pesquisa/pesquisa.component').then(m => m.PesquisaComponent), data: {preload: true}}

Would this be enough? How do I test if it is really being preloaded?"

Answer 1

You have the option to either preload all the lazy loading routes or implement a custom preloading strategy to selectively preload specific routes.

To preload all the lazy loading routes: add withPreloading(PreloadAllModules) in app.config.ts

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

For custom preloading strategy please refer this blog

Please refer to the following links for detailed explanations and examples.

1. Explains preloading
2. Provides examples for both NgModule and Standalone Components.