diff --git a/aio/content/guide/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md index f1c44dad7e..b4a3761054 100644 --- a/aio/content/guide/lazy-loading-ngmodules.md +++ b/aio/content/guide/lazy-loading-ngmodules.md @@ -8,16 +8,15 @@ bundle sizes smaller, which in turn helps decrease load times. For the final sample app with two lazy-loaded modules that this page describes, see the . -There are three main steps to setting up a lazy-loaded feature module: +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. Create the feature module’s component. 1. Configure the routes. ## 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 do already have an app, skip 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: @@ -33,20 +32,20 @@ Navigate into the project by issuing the command `cd customer-app`. ## 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, and `customer-list` is the route path for loading the `customers` component: +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: -ng generate module customers --route customer-list --module app.module +ng generate module customers --route customers --module app.module -This creates a `customers` folder with the new lazy-loadable module `CustomersModule` defined in the file `customers.module.ts`. The command automatically adds the `CustomerComponent` to the new feature module. +This creates a `customers` folder with the new lazy-loadable module `CustomersModule` defined in the `customers.module.ts` file. The command automatically declares the `CustomersComponent` inside the new feature module. -Because the new module is meant to be lazy-loaded, the command does NOT add a reference for the new feature module to the root application's module file, `app.module.ts`. -Instead, it adds the declared route, `customer-list` to the `Routes` array declared in the module provided as the `--module` option. +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`. +Instead, it adds the declared route, `customers` to the `routes` array declared in the module provided as the `--module` option. const routes: Routes = [ - { path: 'customer-list', + { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) } ]; @@ -59,17 +58,17 @@ The import path is the relative path to the module. Use the same command to create a second lazy-loaded feature module with routing, along with its stub component. -ng generate module orders --route order-list --module app.module +ng generate module orders --route orders --module app.module -This creates a new folder called `orders` containing an `OrdersModule` and `OrdersRoutingModule`, along with the new `OrderComponent` source files. -The `order-list` route is added to the `Routes` array in `app-routing.module.ts`, using the lazy-loading syntax. +This creates a new folder 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. const routes: Routes = [ - { path: 'customer-list', + { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }, - { path: 'order-list', + { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) } ]; @@ -90,7 +89,7 @@ To see your app in the browser so far, enter the following command in the termin ng serve -Then go to `localhost:4200` where you should see “app works!” and three buttons. +Then go to `localhost:4200` where you should see “customer-app” and three buttons.
three buttons in the browser @@ -103,8 +102,7 @@ These buttons work, because the CLI automatically added the routes to the featur ## 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 `AppRoutingModule`, update the `routes` array with the following: +Finish this off by adding the default route. In the `app-routing.module.ts` file, update the `routes` array with the following: @@ -114,20 +112,20 @@ The final entry defines a default route. The empty path matches everything that ### Inside the feature module -Next, take a look at `customers.module.ts`. If you’re using the CLI and following the steps outlined in this page, you don’t have to do anything here. +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. -The `customers.module.ts` file imports the `CustomersRoutingModule` and `CustomerListComponent` so the `CustomersModule` class can have access to them. `CustomersRoutingModule` is then listed in the `@NgModule` `imports` array giving `CustomersModule` access to its own routing module, and `CustomerListComponent` is in the `declarations` array, which means `CustomerListComponent` belongs to the `CustomersModule`. +The `customers.module.ts` file imports the `customers-routing.module.ts` and `customers.component.ts` files. `CustomersRoutingModule` is listed in the `@NgModule` `imports` array giving `CustomersModule` access to its own routing module. `CustomersComponent` is in the `declarations` array, which means `CustomersComponent` belongs to the `CustomersModule`. -The feature module has its own routing module, `customers-routing.module.ts`. The `AppRoutingModule` imports the feature module, `CustomersModule`, and `CustomersModule` in turn imports the `CustomersRoutingModule`. +The `app-routing.module.ts` then imports the feature module, `customers.module.ts` using JavaScript's dynamic import. -The feature-specific routing module imports its own feature component, `CustomerListComponent`, along with the other JavaScript import statements. It also adds the route to its own component. +The feature-specific route definition file—`customers-routing.module.ts`—imports its own feature component defined in the `customers.componen.ts` file, along with the other JavaScript import statements. It then maps the empty path to the `CustomersComponent`. -Notice that the `path` is set to an empty string. This is because the path in `AppRoutingModule` is already set to `customers`, so this route in the `CustomersRoutingModule`, is already within the `customers` context. Every route in this routing module is a child route. +The `path` here is set to an empty string because the path in `AppRoutingModule` is already set to `customers`, so this route in the `CustomersRoutingModule`, is already within the `customers` context. Every route in this routing module is a child route. The other feature module's routing module is configured similarly. @@ -161,10 +159,10 @@ 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 `app-routing.module.ts` `imports` array. -This lets Angular know that this module, `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 `RouterService`. -Use `forRoot()` in the `AppRoutingModule`—that is, one time in the app at the root level. +You might have noticed that the 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.