From 0d49fe01eaee03444f2d8a28fd8f4e14a4b91429 Mon Sep 17 00:00:00 2001
From: Alex Rickabaugh <alx+alxhub@alxandria.net>
Date: Fri, 28 Oct 2022 02:14:12 -0700
Subject: [PATCH] docs(core): update standalone docs for `provideRouter`
 (#47902)

This commit updates the standalone components guide on AIO to showcase the
new `provideRouter` API. Previously the guide demonstrated configuring the
router via `importProvidersFrom(RouterModule.forRoot(...))`. A new section
was added to ensure `importProvidersFrom` was still shown in an example.

PR Close #47902
---
 aio/content/guide/standalone-components.md | 23 ++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

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.