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
This commit is contained in:
George Kalpakas 2019-12-25 10:50:11 +02:00 committed by Alex Rickabaugh
parent d66cf31ffc
commit 7cdc118c8e
2 changed files with 13 additions and 20 deletions

View File

@ -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: [

View File

@ -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.
<code-example language="typescript" header="src/app/app-routing.module.ts">
const routes: Routes = [
{
path: 'customers',
loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
}
];
<code-example
header="src/app/app-routing.module.ts"
path="lazy-loading-ngmodules/src/app/app-routing.module.ts"
region="routes-customers">
</code-example>
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.
<code-example language="typescript" header="src/app/app-routing.module.ts">
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)
}
];
<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>
## Set up the UI