honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: move lazy loading and preloading tasks from router to lazy loading doc (#36748) 

After rewriting much of the router doc, it became apparent that the lazy loading/preloading information should be in the lazy loading doc rather than in the router doc. There is now instead a short section that touches on lazy loading but links to the lazy learning document instead of covering it in detail in the router doc.

PR Close #36748
This commit is contained in:
Kapunahele Wong 2020-04-21 16:25:45 -04:00 committed by Kara Erickson
parent 42a9e5ad7d
commit 2c5e873da0
2 changed files with 153 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
aio/content/guide/lazy-loading-ngmodules.md
View File

@ -1,19 +1,61 @@
# Lazy-loading feature modules
## High level view
By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary. For large apps with lots of routes, consider lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps keep initial
bundle sizes smaller, which in turn helps decrease load times.
<div class="alert is-helpful">
For the final sample app with two lazy-loaded modules that this page describes, see the
<live-example></live-example>.
</div>
{@a lazy-loading}
## Lazy loading basics
This section introduces the basic procedure for configuring a lazy-loaded route.
For a step-by-step example, see the [step-by-step setup](#step-by-step) section on this page.
To lazy load Angular modules, use `loadchildren` (instead of `component`) in your `AppRoutingModule` `routes` configuration as follows.
<code-example header="AppRoutingModule (excerpt)">
const routes: Routes = [
{
path: 'items',
loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
}
];
</code-example>
In the lazy-loaded module's routing module, add a route for the component.
<code-example header="Routing module for lazy loaded module (excerpt)">
const routes: Routes = [
{
path: '',
component: ItemsComponent
}
];
</code-example>
Also be sure to remove the `ItemsModule` from the `AppModule`.
For step-by-step instructions on lazy loading modules, continue with the following sections of this page.
{@a step-by-step}
## Step-by-step setup
There are two main steps to setting up a lazy-loaded feature module:
1. Create the feature module with the CLI, using the `--route` flag.
1. Configure the routes.
## Set up an app
### Set up an app
If you don’t already have an app, you can follow the steps below to
create one with the CLI. If you already have an app, skip to
@ -36,7 +78,7 @@ See [Keeping Up to Date](guide/updating).
</div>
## Create a feature module with routing
### Create a feature module with routing
Next, you’ll need a feature module with a component to route to.
To make one, enter the following command in the terminal, where `customers` is the name of the feature module. The path for loading the `customers` feature modules is also `customers` because it is specified with the `--route` option:
@ -59,7 +101,7 @@ Instead, it adds the declared route, `customers` to the `routes` array declared
Notice that the lazy-loading syntax uses `loadChildren` followed by a function that uses the browser's built-in `import('...')` syntax for dynamic imports.
The import path is the relative path to the module.
### Add another feature module
#### Add another feature module
Use the same command to create a second lazy-loaded feature module with routing, along with its stub component.
@ -76,16 +118,14 @@ The `orders` route, specified with the `--route` option, is added to the `routes
region="routes-customers-orders">
</code-example>
## Set up the UI
### Set up the UI
Though you can type the URL into the address bar, a navigation UI is easier for the user and more common.
Replace the default placeholder markup in `app.component.html` with a custom nav
so you can easily navigate to your modules in the browser:
<code-example path="lazy-loading-ngmodules/src/app/app.component.html" header="app.component.html" region="app-component-template" header="src/app/app.component.html"></code-example>
To see your app in the browser so far, enter the following command in the terminal window:
<code-example language="bash">
@ -102,7 +142,7 @@ These buttons work, because the CLI automatically added the routes to the featur
{@a config-routes}
## Imports and route configuration
### Imports and route configuration
The CLI automatically added each feature module to the routes map at the application level.
Finish this off by adding the default route. In the `app-routing.module.ts` file, update the `routes` array with the following:
@ -134,7 +174,7 @@ The other feature module's routing module is configured similarly.
<code-example path="lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts" id="orders-routing.module.ts" region="orders-routing-module-detail" header="src/app/orders/orders-routing.module.ts (excerpt)"></code-example>
## Confirm it’s working
### Verify lazy loading
You can check to see that a module is indeed being lazy loaded with the Chrome developer tools. In Chrome, open the dev tools by pressing `Cmd+Option+i` on a Mac or `Ctrl+Shift+j` on a PC and go to the Network Tab.
@ -175,6 +215,105 @@ The `forRoot()` method takes care of the *global* injector configuration for the
The `forChild()` method has no injector configuration. It uses directives such as `RouterOutlet` and `RouterLink`.
For more information, see the [`forRoot()` pattern](guide/singleton-services#forRoot) section of the [Singleton Services](guide/singleton-services) guide.
{@a preloading}
## Preloading
Preloading improves UX by loading parts of your app in the background.
You can preload modules or component data.
### Preloading modules
Preloading modules improves UX by loading parts of your app in the background so 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`.
<code-example header="AppRoutingModule (excerpt)">
import { PreloadAllModules } from '@angular/router';
</code-example>
Still in the `AppRoutingModule`, specify your preloading strategy in `forRoot()`.
<code-example header="AppRoutingModule (excerpt)">
RouterModule.forRoot(
appRoutes,
{
preloadingStrategy: PreloadAllModules
}
)
</code-example>
### Preloading component data
To preload component data, you can use a `resolver`.
Resolvers improve UX by blocking the page load until all necessary data is available to fully display the page.
#### Resolvers
Create a resolver service.
With the CLI, the command to generate a service is as follows:
<code-example language="none" class="code-shell">
ng generate service <service-name>
</code-example>
In your service, import the following router members, implement `Resolve`, and inject the `Router` service:
<code-example header="Resolver service (excerpt)">
import { Resolve } from '@angular/router';
...
export class CrisisDetailResolverService implements Resolve<> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<> {
// your logic goes here
}
}
</code-example>
Import this resolver into your module's routing module.
<code-example header="Feature module's routing module (excerpt)">
import { YourResolverService } from './your-resolver.service';
</code-example>
Add a `resolve` object to the component's `route` configuration.
<code-example header="Feature module's routing module (excerpt)">
{
path: '/your-path',
component: YourComponent,
resolve: {
crisis: YourResolverService
}
}
</code-example>
In the component, use an `Observable` to get the data from the `ActivatedRoute`.
<code-example header="Component (excerpt)">
ngOnInit() {
this.route.data
.subscribe((your-parameters) => {
// your data-specific code goes here
});
}
</code-example>
For more information with a working example, see the [routing tutorial section on preloading](guide/router#preloading-background-loading-of-feature-areas).
<hr>
## More on NgModules and routing

126
aio/content/guide/router.md
View File

@ -357,130 +357,12 @@ Inject `ActivatedRoute` and `Router` in the constructor of the component class s
{@a lazy-loading}
## Lazy loading modules
## Lazy loading
To lazy load Angular modules, use `loadchildren` (instead of `component`) in your `AppRoutingModule` `routes` configuration as follows:
<code-example header="AppRoutingModule (excerpt)">
const routes: Routes = [
{
path: 'items',
loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
}
];
</code-example>
In the lazy loaded module's routing module, add a route for the component.
<code-example header="Routing module for lazy loaded module (excerpt)">
const routes: Routes = [
{
path: '',
component: ItemsComponent
}
];
</code-example>
Also be sure to remove the `ItemsModule` from the `AppModule`. For more information on lazy loading modules see [Lazy-loading feature modules](guide/lazy-loading-ngmodules).
{@a preloading}
## Preloading
Preloading improves UX by loading parts of your app in the background. You can preload modules or component data.
### Preloading modules
To enable preloading of all lazy loaded modules, import the `PreloadAllModules` token from the Angular `router`.
<code-example header="AppRoutingModule (excerpt)">
import { PreloadAllModules } from '@angular/router';
</code-example>
Still in the `AppRoutingModule`, specify your preloading strategy in `forRoot()`.
<code-example header="AppRoutingModule (excerpt)">
RouterModule.forRoot(
appRoutes,
{
preloadingStrategy: PreloadAllModules
}
)
</code-example>
### Preloading component data
You can preload component data so that all elements and data on a page render at the same time when the user activates a route. To preload component data, you can use a `resolver`.
#### Resolvers
Create a resolver service. With the CLI, the command to generate a service is as follows:
<code-example language="none" class="code-shell">
ng generate service <service-name>
</code-example>
In your service, import the following router members, implement `Resolve`, and inject the `Router` service:
<code-example header="Resolver service (excerpt)">
import { Resolve } from '@angular/router';
...
export class CrisisDetailResolverService implements Resolve<> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<> {
// your logic goes here
}
}
</code-example>
Import this resolver into your module's routing module.
<code-example header="Feature module's routing module (excerpt)">
import { YourResolverService } from './your-resolver.service';
</code-example>
Add a `resolve` object to the component's `route` configuration.
<code-example header="Feature module's routing module (excerpt)">
{
path: '/your-path',
component: YourComponent,
resolve: {
crisis: YourResolverService
}
}
</code-example>
In the component, use an observable to get the data from the `ActivatedRoute`.
<code-example header="Component (excerpt)">
ngOnInit() {
this.route.data
.subscribe((your-parameters) => {
// your data-specific code goes here
});
}
</code-example>
For more information with a working example, see the [routing tutorial section on preloading](guide/router#preloading-background-loading-of-feature-areas).
You can configure your routes to lazy load modules, which means that Angular only loads modules as needed, rather than loading all modules when the app launches.
Additionally, you can preload parts of your app in the background to improve the user experience.
For more information on lazy loading and preloading see the dedicated guide [Lazy loading NgModules](guide/lazy-loading-ngmodules).
## Preventing unauthorized access