Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

docs(core): update standalone docs for provideRouter (#47902)

Browse source 
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
This commit is contained in:
Alex Rickabaugh 2022-10-28 02:14:12 -07:00
parent 11288f2504
commit 0d49fe01ea
1 changed files with 19 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
aio/content/guide/standalone-components.md
View file

@ -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.