docs(nx): add a guide on using lazy loading

docs/guides/misc-lazy-loading.md

@@ -0,0 +1,149 @@
+# Lazy Loading Libraries
+
+You can use libraries across the app using two strategies:
+
+1. **Eager Loading**: Loads libs when the app is bootstrapped.
+2. **Lazy Loading**: Loads libs when the app needs them.
+
+### Lazy Loading
+
+Even a medium size application has code that doesn't need to load until later. Lazing loading this code help with the bundle size, as a a result, with the startup time of your application.
+
+To learn how to use lazy loading, run `ng g @nrwl/angular:lib todo-list-shell --router --lazy --parentModule=apps/todos/src/app/app.module.ts`.
+
+_**Explanation**_
+
+- **--routing**: Add router configuration.
+
+- **--lazy**: Add `RouterModule.forChild` when set to true, and a simple array of routes when set to false.
+
+- **--parentModule**: Updates the parent module.
+
+```treeview
+myorg/
+├── apps/
+│   ├── todos/
+│   ├── todos-e2e/
+│   └── api/
+├── libs/
+│   └── todo-list-shell/
+│       ├── jest.conf.js
+│       ├── src/
+│       │   ├── lib/
+│       │   │  ├── todo-list-shell.module.spec.ts
+│       │   │  └── todo-list-shell.module.ts
+│       │   └── index.ts
+│       ├── tsconfig.app.json
+│       ├── tsconfig.json
+│       ├── tsconfig.spec.json
+│       └── tslint.json
+├── nx.json
+├── package.json
+├── tools/
+├── tsconfig.json
+└── tslint.json
+```
+
+`todo-list-shell.module.ts`:
+
+```typescript
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [
+    CommonModule,
+
+    RouterModule.forChild([
+      /* {path: '', pathMatch: 'full', component: InsertYourComponentHere} */
+    ])
+  ]
+})
+export class FeatureShellModule {}
+```
+
+### Add Component
+
+Now add a component to the newly created todo-list-shell library:
+
+```bash
+ng g component main --project=todo-list-shell
+```
+
+```treeview
+myorg/
+├── apps/
+│   ├── todos/
+│   ├── todos-e2e/
+│   └── api/
+├── libs/
+│   └── todo-list-shell/
+│       ├── jest.conf.js
+│       ├── src/
+│       │   ├── lib/
+│       │   │  ├── todo-list/
+│       │   │  │   ├── todo-list.component.css
+│       │   │  │   ├── todo-list.component.html
+│       │   │  │   ├── todo-list.component.spec.ts
+│       │   │  │   └── todo-list.component.ts
+│       │   │  ├── todo-list-shell.module.spec.ts
+│       │   │  └── todo-list-shell.module.ts
+│       │   └── index.ts
+│       ├── tsconfig.app.json
+│       ├── tsconfig.json
+│       ├── tsconfig.spec.json
+│       └── tslint.json
+├── nx.json
+├── package.json
+├── tools/
+├── tsconfig.json
+└── tslint.json
+```
+
+Next, update the `TodoListShellModule` to use the component:
+
+```typescript
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { TodoListComponent } from './todo-list/todo-list.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+      { path: '', pathMatch: 'full', component: TodoListComponent }
+    ])
+  ]
+})
+export class TodoListShellModule {}
+```
+
+### Changes in AppModule
+
+The schematic already modified `app.module.ts` by adding a lazy route with the loadChildren property.
+
+```typescript
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+// You can add multiple routes as your needs
+const routes: Routes = [
+  {
+    path: 'list',
+    loadChildren: () =>
+      import('@myorg/todo-list-shell').then(m => m.TodoListShellModule)
+  }
+];
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, RouterModule.forRoot(routes)],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```

docs/map.json

@@ -148,6 +148,10 @@
             "name": "Using Nx at Enterprises",
             "id": "monorepo-nx-enterprise"
           },
+          {
+            "name": "Lazy Loading Code",
+            "id": "misc-lazy-loading"
+          },
           {
             "name": "Changes between Nx 7 and Nx 8",
             "id": "nx7-to-nx8"