Skip to content

Commit

Permalink
docs(core): update standalone docs for provideRouter (#47902)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
alxhub committed Nov 1, 2022
1 parent 99597c8 commit e683298
Showing 1 changed file with 18 additions and 3 deletions.
21 changes: 18 additions & 3 deletions aio/content/guide/standalone-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,16 +91,29 @@ 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'},
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(
RouterModule.forRoot([/* app routes */]),
LibraryModule.forRoot()
),
// ...
]
});
```
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit e683298

Please sign in to comment.