From 7cdc118c8e7c17d1dd231907df8773aefd25210e Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Wed, 25 Dec 2019 10:50:11 +0200 Subject: [PATCH] refactor(docs-infra): extract all `lazy-loading-ngmodules` examples from mini-app (#34599) Previously, some of the examples in the `lazy-loading-ngmodules` guide were hard-coded. This commit ensures all examples in the guide are extracted from docregions in the corresponding example project. PR Close #34599 --- .../src/app/app-routing.module.ts | 7 +++-- aio/content/guide/lazy-loading-ngmodules.md | 26 ++++++------------- 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts index 401aecbb1c..d0a2549cc7 100644 --- a/aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts +++ b/aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts @@ -4,23 +4,26 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -// #docregion const-routes +// #docregion const-routes, routes-customers, routes-customers-orders const routes: Routes = [ { path: 'customers', loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule) + // #enddocregion routes-customers }, { path: 'orders', loadChildren: () => import('./orders/orders.module').then(mod => mod.OrdersModule) + // #enddocregion routes-customers-orders }, { path: '', redirectTo: '', pathMatch: 'full' + // #docregion routes-customers, routes-customers-orders } ]; -// #enddocregion const-routes +// #enddocregion const-routes, routes-customers, routes-customers-orders @NgModule({ imports: [ diff --git a/aio/content/guide/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md index 3c61733b85..1a6bb84bbc 100644 --- a/aio/content/guide/lazy-loading-ngmodules.md +++ b/aio/content/guide/lazy-loading-ngmodules.md @@ -50,13 +50,10 @@ This creates a `customers` folder with the new lazy-loadable module `CustomersMo 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: 'customers', - loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) - } -]; + Notice that the lazy-loading syntax uses `loadChildren` followed by a function that uses the browser's built-in `import('...')` syntax for dynamic imports. @@ -73,17 +70,10 @@ 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. 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: 'customers', - loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) - }, - { - path: 'orders', - loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) - } -]; + ## Set up the UI