docs: align the lazy-loading guide to what's generated by the CLI (#33070)

PR Close #33070

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
 <live-example></live-example>.
 
-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:
 
 <code-example language="bash">
-ng generate module customers --route customer-list --module app.module
+ng generate module customers --route customers --module app.module
 </code-example>
 
-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`.
+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, `customer-list` to the `Routes` array declared in the module provided as the `--module` option.
+Instead, it adds the declared route, `customers` to the `routes` array declared in the module provided as the `--module` option.
 
 <code-example language="typescript" header="src/app/app-routing.module.ts">
 const routes: Routes = [
-    { path: 'customer-list',
+    { path: 'customers',
       loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }
     ];
 </code-example>
@@ -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.
 
 <code-example language="bash">
-ng generate module orders --route order-list --module app.module
+ng generate module orders --route orders --module app.module
 </code-example>
 
-This creates a new folder called `orders` containing an `OrdersModule` and `OrdersRoutingModule`, along with the new `OrderComponent` source files.
+This creates a new folder called `orders` containing the `OrdersModule` and `OrdersRoutingModule`, along with the new `OrdersComponent` source files.
-The `order-list` route is added to the `Routes` array in `app-routing.module.ts`, using the lazy-loading syntax.
+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 language="typescript" header="src/app/app-routing.module.ts">
 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) }
     ];
 </code-example>
@@ -90,7 +89,7 @@ To see your app in the browser so far, enter the following command in the termin
 ng serve
 </code-example>
 
-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.
 
 <figure>
  <img src="generated/images/guide/lazy-loading-ngmodules/three-buttons.png" width="300" alt="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.
+Finish this off by adding the default route. In the `app-routing.module.ts` file, update the `routes` array with the following:
-In `AppRoutingModule`, update the `routes` array with the following:
 
 <code-example path="lazy-loading-ngmodules/src/app/app-routing.module.ts" id="app-routing.module.ts" region="const-routes" header="src/app/app-routing.module.ts"></code-example>
 
@@ -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.
 
 <code-example path="lazy-loading-ngmodules/src/app/customers/customers.module.ts" id="customers.module.ts" region="customers-module" header="src/app/customers/customers.module.ts"></code-example>
 
-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`.
 
 <code-example path="lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts" id="customers-routing.module.ts" region="customers-routing-module" header="src/app/customers/customers-routing.module.ts"></code-example>
 
-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.
+You might have noticed that the CLI adds `RouterModule.forRoot(routes)` to the `AppRoutingModule` `imports` array.
-This lets Angular know that this module, `AppRoutingModule`, is a routing module and `forRoot()` specifies that this is the root routing module.
+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 `RouterService`.
+It configures all the routes you pass to it, gives you access to the router directives, and registers the `Router` service.
-Use `forRoot()` in the `AppRoutingModule`&mdash;that is, one time in the app at the root level.
+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.