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:
parent
d66cf31ffc
commit
7cdc118c8e
|
@ -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: [
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue