mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
docs: fix linter errors for lazy-loading-ngmodules.md (#47645)
Update aio/content/guide/lazy-loading-ngmodules.md Co-authored-by: Bob Watson <104218420+bob-watson@users.noreply.github.com> PR Close #47645
This commit is contained in:
committed by
Jessica Janiuk
parent
f457b6c26b
commit
6f4f16219b
@@ -1,6 +1,6 @@
|
||||
# Lazy-loading feature modules
|
||||
|
||||
By default, NgModules are eagerly loaded, which means that as soon as the application loads, so do all the NgModules, whether or not they are immediately necessary.
|
||||
By default, NgModules are eagerly loaded. This means that as soon as the application loads, so do all the NgModules, whether they are immediately necessary or not.
|
||||
For large applications 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.
|
||||
|
||||
@@ -50,37 +50,42 @@ For step-by-step instructions on lazy loading modules, continue with the followi
|
||||
|
||||
## Step-by-step setup
|
||||
|
||||
There are two main steps to setting up a lazy-loaded feature module:
|
||||
Setting up a lazy-loaded feature module requires two main steps:
|
||||
|
||||
1. Create the feature module with the CLI, using the `--route` flag.
|
||||
1. Create the feature module with the Angular CLI, using the `--route` flag.
|
||||
1. Configure the routes.
|
||||
|
||||
### Set up an app
|
||||
### Set up an application
|
||||
|
||||
If you don't already have an application, follow the following steps to create one with the Angular CLI.
|
||||
If you already have an application, skip to [Configure the routes](#config-routes).
|
||||
|
||||
<!-- vale Angular.Google_WordListWarnings = NO -->
|
||||
|
||||
If you don't already have an app, follow the following steps to create one with the CLI.
|
||||
If you already have an app, skip to [Configure the routes](#config-routes).
|
||||
Enter the following command where `customer-app` is the name of your app:
|
||||
|
||||
<!-- vale Angular.Google_WordListWarnings = YES -->
|
||||
|
||||
<code-example format="shell" language="shell">
|
||||
|
||||
ng new customer-app --routing
|
||||
|
||||
</code-example>
|
||||
|
||||
This creates an application called `customer-app` and the `--routing` flag generates a file called `app-routing.module.ts`, which is one of the files you need for setting up lazy loading for your feature module.
|
||||
This creates an application called `customer-app` and the `--routing` flag generates a file called `app-routing.module.ts`. This is one of the files you need for setting up lazy loading for your feature module.
|
||||
Navigate into the project by issuing the command `cd customer-app`.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
The `--routing` option requires Angular/CLI version 8.1 or higher.
|
||||
The `--routing` option requires Angular CLI version 8.1 or higher.
|
||||
See [Keeping Up to Date](guide/updating).
|
||||
|
||||
</div>
|
||||
|
||||
### 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.
|
||||
Next, you need a feature module with a component to route to.
|
||||
To make one, enter the following command in the command line tool, 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:
|
||||
|
||||
<code-example format="shell" language="shell">
|
||||
@@ -89,10 +94,10 @@ ng generate module customers --route customers --module app.module
|
||||
|
||||
</code-example>
|
||||
|
||||
This creates a `customers` folder having the new lazy-loadable feature module `CustomersModule` defined in the `customers.module.ts` file and the routing module `CustomersRoutingModule` defined in the `customers-routing.module.ts` file.
|
||||
This creates a `customers` directory having the new lazy-loadable feature module `CustomersModule` defined in the `customers.module.ts` file and the routing module `CustomersRoutingModule` defined in the `customers-routing.module.ts` file.
|
||||
The command automatically declares the `CustomersComponent` and imports `CustomersRoutingModule` inside the new feature module.
|
||||
|
||||
Because the new module is meant to be lazy-loaded, the command does NOT add a reference to the new feature module in the application's root module file, `app.module.ts`.
|
||||
Because the new module is meant to be lazy-loaded, the command does **not** add a reference to it in the application's root module file, `app.module.ts`.
|
||||
Instead, it adds the declared route, `customers` to the `routes` array declared in the module provided as the `--module` option.
|
||||
|
||||
<code-example header="src/app/app-routing.module.ts" path="lazy-loading-ngmodules/src/app/app-routing.module.ts" region="routes-customers"></code-example>
|
||||
@@ -105,9 +110,9 @@ The import path is the relative path to the module.
|
||||
<header>String-based lazy loading</header>
|
||||
|
||||
In Angular version 8, the string syntax for the `loadChildren` route specification [was deprecated](guide/deprecations#loadchildren-string-syntax) in favor of the `import()` syntax.
|
||||
However, you can opt into using string-based lazy loading \(`loadChildren: './path/to/module#Module'`\) by including the lazy-loaded routes in your `tsconfig` file, which includes the lazy-loaded files in the compilation.
|
||||
You can opt into using string-based lazy loading \(`loadChildren: './path/to/module#Module'`\) by including the lazy-loaded routes in your `tsconfig` file, which includes the lazy-loaded files in the compilation.
|
||||
|
||||
By default the CLI generates projects with stricter file inclusions intended to be used with the `import()` syntax.
|
||||
By default the Angular CLI generates projects with stricter file inclusions intended to be used with the `import()` syntax.
|
||||
|
||||
</div>
|
||||
|
||||
@@ -121,7 +126,7 @@ ng generate module orders --route orders --module app.module
|
||||
|
||||
</code-example>
|
||||
|
||||
This creates a new folder called `orders` containing the `OrdersModule` and `OrdersRoutingModule`, along with the new `OrdersComponent` source files.
|
||||
This creates a new directory called `orders` containing the `OrdersModule` and `OrdersRoutingModule`, along with the new `OrdersComponent` source files.
|
||||
The `orders` route, specified with the `--route` option, is added to the `routes` array inside the `app-routing.module.ts` file, using the lazy-loading syntax.
|
||||
|
||||
<code-example header="src/app/app-routing.module.ts" path="lazy-loading-ngmodules/src/app/app-routing.module.ts" region="routes-customers-orders"></code-example>
|
||||
@@ -133,7 +138,7 @@ Replace the default placeholder markup in `app.component.html` with a custom nav
|
||||
|
||||
<code-example header="app.component.html" path="lazy-loading-ngmodules/src/app/app.component.html" region="app-component-template" header="src/app/app.component.html"></code-example>
|
||||
|
||||
To see your application in the browser so far, enter the following command in the terminal window:
|
||||
To see your application in the browser so far, enter the following command in the command line tool window:
|
||||
|
||||
<code-example format="shell" language="shell">
|
||||
|
||||
@@ -141,21 +146,25 @@ ng serve
|
||||
|
||||
</code-example>
|
||||
|
||||
<!-- vale Angular.Google_WordListWarnings = NO -->
|
||||
|
||||
Then go to `localhost:4200` where you should see "customer-app" and three buttons.
|
||||
|
||||
<!-- vale Angular.Google_WordListWarnings = YES -->
|
||||
|
||||
<div class="lightbox">
|
||||
|
||||
<img alt="three buttons in the browser" src="generated/images/guide/lazy-loading-ngmodules/three-buttons.png" width="300">
|
||||
|
||||
</div>
|
||||
|
||||
These buttons work, because the CLI automatically added the routes to the feature modules to the `routes` array in `app-routing.module.ts`.
|
||||
These buttons work, because the Angular CLI automatically added the routes to the feature modules to the `routes` array in `app-routing.module.ts`.
|
||||
|
||||
<a id="config-routes"></a>
|
||||
|
||||
### Imports and route configuration
|
||||
|
||||
The CLI automatically added each feature module to the routes map at the application level.
|
||||
The Angular 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:
|
||||
|
||||
@@ -168,7 +177,7 @@ The empty path matches everything that doesn't match an earlier path.
|
||||
### Inside the feature module
|
||||
|
||||
Next, take a look at the `customers.module.ts` file.
|
||||
If you're using the CLI and following the steps outlined in this page, you don't have to do anything here.
|
||||
If you're using the Angular CLI and following the steps outlined in this page, you don't have to do anything here.
|
||||
|
||||
<code-example header="src/app/customers/customers.module.ts" path="lazy-loading-ngmodules/src/app/customers/customers.module.ts" id="customers.module.ts" region="customers-module"></code-example>
|
||||
|
||||
@@ -192,7 +201,7 @@ The other feature module's routing module is configured similarly.
|
||||
|
||||
### Verify lazy loading
|
||||
|
||||
You can check to see that a module is indeed being lazy loaded with the Chrome developer tools.
|
||||
You can verify that a module is indeed being lazy loaded with the Chrome developer tools.
|
||||
In Chrome, open the developer tools by pressing `Cmd+Option+i` on a Mac or `Ctrl+Shift+j` on a PC and go to the Network Tab.
|
||||
|
||||
<div class="lightbox">
|
||||
@@ -211,7 +220,7 @@ A chunk should appear for Orders and for Customers but only appears once for eac
|
||||
|
||||
</div>
|
||||
|
||||
To see it again, or to test after working in the project, clear everything out by clicking the circle with a line through it in the upper left of the Network Tab:
|
||||
To see it again, or to test after making changes, click the circle with a line through it in the upper left of the Network Tab:
|
||||
|
||||
<div class="lightbox">
|
||||
|
||||
@@ -223,13 +232,13 @@ Then reload with `Cmd+r` or `Ctrl+r`, depending on your platform.
|
||||
|
||||
## `forRoot()` and `forChild()`
|
||||
|
||||
You might have noticed that the CLI adds `RouterModule.forRoot(routes)` to the `AppRoutingModule` `imports` array.
|
||||
You might have noticed that the Angular CLI adds `RouterModule.forRoot(routes)` to the `AppRoutingModule` `imports` array.
|
||||
This lets Angular know that the `AppRoutingModule` is a routing module and `forRoot()` specifies that this is the root routing module.
|
||||
It configures all the routes you pass to it, gives you access to the router directives, and registers the `Router` service.
|
||||
Use `forRoot()` only once in the application, inside the `AppRoutingModule`.
|
||||
|
||||
The CLI also adds `RouterModule.forChild(routes)` to feature routing modules.
|
||||
This way, Angular knows that the route list is only responsible for providing additional routes and is intended for feature modules.
|
||||
The Angular CLI also adds `RouterModule.forChild(routes)` to feature routing modules.
|
||||
This way, Angular knows that the route list is only responsible for providing extra routes and is intended for feature modules.
|
||||
You can use `forChild()` in multiple modules.
|
||||
|
||||
The `forRoot()` method takes care of the *global* injector configuration for the Router.
|
||||
@@ -246,7 +255,7 @@ You can preload modules or component data.
|
||||
|
||||
### Preloading modules
|
||||
|
||||
Preloading modules improves UX by loading parts of your application in the background so users don't have to wait for the elements to download when they activate a route.
|
||||
Preloading modules improves UX by loading parts of your application in the background. By doing this, 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`.
|
||||
|
||||
@@ -277,7 +286,7 @@ Resolvers improve UX by blocking the page load until all necessary data is avail
|
||||
#### Resolvers
|
||||
|
||||
Create a resolver service.
|
||||
With the CLI, the command to generate a service is as follows:
|
||||
With the Angular CLI, the command to create a service is as follows:
|
||||
|
||||
<code-example format="shell" language="shell">
|
||||
|
||||
@@ -285,7 +294,7 @@ ng generate service <service-name>
|
||||
|
||||
</code-example>
|
||||
|
||||
In the newly-created service, implement the `Resolve` interface provided by the `@angular/router` package:
|
||||
In the newly created service, implement the `Resolve` interface provided by the `@angular/router` package:
|
||||
|
||||
<code-example header="Resolver service (excerpt)">
|
||||
|
||||
@@ -318,6 +327,7 @@ import { CrisisDetailResolverService } from './crisis-detail-resolver.service';
|
||||
Add a `resolve` object to the component's `route` configuration.
|
||||
|
||||
<code-example header="Feature module's routing module (excerpt)">
|
||||
|
||||
{
|
||||
path: '/your-path',
|
||||
component: YourComponent,
|
||||
@@ -325,6 +335,7 @@ Add a `resolve` object to the component's `route` configuration.
|
||||
crisis: CrisisDetailResolverService
|
||||
}
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
In the component's constructor, inject an instance of the `ActivatedRoute` class that represents the current route.
|
||||
@@ -367,8 +378,8 @@ For more information with a working example, see the [routing tutorial section o
|
||||
|
||||
A common error when lazy-loading modules is importing common modules in multiple places within an application.
|
||||
Test for this condition by first generating the module using the Angular CLI and including the `--route route-name` parameter, where `route-name` is the name of your module.
|
||||
Next, generate the module without the `--route` parameter.
|
||||
If the Angular CLI generates an error when you use the `--route` parameter, but runs correctly without it, you might have imported the same module in multiple places.
|
||||
Next, create the module without the `--route` parameter.
|
||||
If `ng generate module` with the `--route` parameter returns an error, but runs correctly without it, you might have imported the same module in multiple places.
|
||||
|
||||
Remember, many common Angular modules should be imported at the base of your application.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user