iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts
View File

@ -4,23 +4,26 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
// #docregion const-routes // #docregion const-routes, routes-customers, routes-customers-orders
const routes: Routes = [ const routes: Routes = [
{ {
path: 'customers', path: 'customers',
loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule) loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule)
// #enddocregion routes-customers
}, },
{ {
path: 'orders', path: 'orders',
loadChildren: () => import('./orders/orders.module').then(mod => mod.OrdersModule) loadChildren: () => import('./orders/orders.module').then(mod => mod.OrdersModule)
// #enddocregion routes-customers-orders
}, },
{ {
path: '', path: '',
redirectTo: '', redirectTo: '',
pathMatch: 'full' pathMatch: 'full'
// #docregion routes-customers, routes-customers-orders
} }
]; ];
// #enddocregion const-routes // #enddocregion const-routes, routes-customers, routes-customers-orders
@NgModule({ @NgModule({
imports: [ imports: [

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