diff --git a/aio/content/guide/standalone-components.md b/aio/content/guide/standalone-components.md index 34fd3521852..a2524f99813 100644 --- a/aio/content/guide/standalone-components.md +++ b/aio/content/guide/standalone-components.md @@ -91,20 +91,33 @@ bootstrapApplication(PhotoAppComponent, { }); ``` -The standalone bootstrap operation is based on explicitly configuring a list of `Provider`s for dependency injection. However, existing libraries may rely on `NgModule`s for configuring DI. For example, Angular’s router uses the `RouterModule.forRoot()` helper to set up routing in an application. You can use these existing `NgModule`s in `bootstrapApplication` via the `importProvidersFrom` utility: +The standalone bootstrap operation is based on explicitly configuring a list of `Provider`s for dependency injection. In Angular, `provide`-prefixed functions can be used to configure different systems without needing to import NgModules. For example, `provideRouter` is used in place of `RouterModule.forRoot` to configure the router: ```ts bootstrapApplication(PhotoAppComponent, { providers: [ {provide: BACKEND_URL, useValue: 'https://photoapp.looknongmodules.com/api'}, - importProvidersFrom( - RouterModule.forRoot([/* app routes */]), - ), + provideRouter([/* app routes */]), // ... ] }); ``` +Many third party libraries have also been updated to support this `provide`-function configuration pattern. If a library only offers an NgModule API for its DI configuration, you can use the `importProvidersFrom` utility to still use it with `bootstrapApplication` and other standalone contexts: + +```ts +import {LibraryModule} from 'ngmodule-based-library'; + +bootstrapApplication(PhotoAppComponent, { + providers: [ + {provide: BACKEND_URL, useValue: 'https://photoapp.looknongmodules.com/api'}, + importProvidersFrom( + LibraryModule.forRoot() + ), + ] +}); +``` + ## Routing and lazy-loading The router APIs were updated and simplified to take advantage of the standalone components: an `NgModule` is no longer required in many common, lazy-loading scenarios. @@ -211,6 +224,8 @@ export const ADMIN_ROUTES: Route[] = [{ Note the use of an empty-path route to host `providers` that are shared among all the child routes. +`importProvidersFrom` can be used to import existing NgModule-based DI configuration into route `providers` as well. + ## Advanced topics This section goes into more details that are relevant only to more advanced usage patterns. You can safely skip this section when learning about standalone components, directives, and pipes for the first time.