From ab1a3852d41156a05e69556aaa2431ad1f609e0f Mon Sep 17 00:00:00 2001 From: Peter Date: Sun, 7 May 2023 17:18:00 +0200 Subject: [PATCH] docs: standalone component preloading config The preloading modules documentation were missing information about how to apply preloading strategies to standalone application ( `ng new AppName --standalone` ). Feel free to fix anything not in line with the Angular documentation style guide, as this is my first attempt at contributing :) - Added example for `app.config.ts` providing info on the `withPreloading()` you can add to the `provideRouter()` RouterFeatures. - Specified that preloading modules also applies for standalone components. --- aio/content/guide/lazy-loading-ngmodules.md | 38 ++++++++++++++++++--- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/aio/content/guide/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md index d0c22ab4fce0..1a927e75d6a0 100644 --- a/aio/content/guide/lazy-loading-ngmodules.md +++ b/aio/content/guide/lazy-loading-ngmodules.md @@ -251,13 +251,15 @@ For more information, see the [`forRoot()` pattern](guide/singleton-services#for ## Preloading Preloading improves UX by loading parts of your application in the background. -You can preload modules or component data. +You can preload modules, standalone components or component data. -### Preloading modules +### Preloading modules and standalone components -Preloading modules improves UX by loading parts of your application in the background. By doing this, users don't have to wait for the elements to download when they activate a route. +Preloading modules and standalone components improves UX by loading parts of your application in the background. By doing this, users don't have to wait for the elements to download when they activate a route. -To enable preloading of all lazy loaded modules, import the `PreloadAllModules` token from the Angular `router`. +To enable preloading of all lazy loaded modules and standalone components, import the `PreloadAllModules` token from the Angular `router`. + +### Module based application @@ -278,6 +280,32 @@ RouterModule.forRoot( +### Standalone application + +For standalone applications configure preloading strategies by adding `withPreloading` to `provideRouter`s RouterFeatures in `app.config.ts` + + + +import { ApplicationConfig } from '@angular/core'; +import { + PreloadAllModules, + provideRouter + withPreloading, +} from '@angular/router'; + +import { routes } from './app.routes'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideRouter( + routes, + withPreloading(PreloadAllModules) + ), + ], +}; + + + ### Preloading component data To preload component data, use a `resolver`. @@ -401,4 +429,4 @@ You might also be interested in the following: -@reviewed 2022-02-28 +@reviewed 2022-05-07