From 6f4f16219b429398b6fa814236a5819e61e2f514 Mon Sep 17 00:00:00 2001 From: WD Snoeijer <88512452+dsnoeijer@users.noreply.github.com> Date: Wed, 5 Oct 2022 20:00:49 +0200 Subject: [PATCH] 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 --- aio/content/guide/lazy-loading-ngmodules.md | 69 ++++++++++++--------- 1 file changed, 40 insertions(+), 29 deletions(-) diff --git a/aio/content/guide/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md index 4c64b849385..81678da161b 100644 --- a/aio/content/guide/lazy-loading-ngmodules.md +++ b/aio/content/guide/lazy-loading-ngmodules.md @@ -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). + + -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: + + ng new customer-app --routing -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`.
-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).
### 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: @@ -89,10 +94,10 @@ ng generate module customers --route customers --module app.module -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. @@ -105,9 +110,9 @@ The import path is the relative path to the module.
String-based lazy loading
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. @@ -121,7 +126,7 @@ ng generate module orders --route orders --module app.module -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. @@ -133,7 +138,7 @@ Replace the default placeholder markup in `app.component.html` with a custom nav -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: @@ -141,21 +146,25 @@ ng serve + + Then go to `localhost:4200` where you should see "customer-app" and three buttons. + +
three buttons in the browser
-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`. ### 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. @@ -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.
@@ -211,7 +220,7 @@ A chunk should appear for Orders and for Customers but only appears once for eac
-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:
@@ -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: @@ -285,7 +294,7 @@ ng generate service <service-name> -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: @@ -318,6 +327,7 @@ import { CrisisDetailResolverService } from './crisis-detail-resolver.service'; Add a `resolve` object to the component's `route` configuration. + { path: '/your-path', component: YourComponent, @@ -325,6 +335,7 @@ Add a `resolve` object to the component's `route` configuration. crisis: CrisisDetailResolverService } } + 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.