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 073bf73dd6..401aecbb1c 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 @@ -8,11 +8,11 @@ import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: 'customers', - loadChildren: './customers/customers.module#CustomersModule' + loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule) }, { path: 'orders', - loadChildren: './orders/orders.module#OrdersModule' + loadChildren: () => import('./orders/orders.module').then(mod => mod.OrdersModule) }, { path: '', diff --git a/aio/content/examples/ngmodules/src/app/app-routing.module.ts b/aio/content/examples/ngmodules/src/app/app-routing.module.ts index 2fea32093a..3ae0d3d346 100644 --- a/aio/content/examples/ngmodules/src/app/app-routing.module.ts +++ b/aio/content/examples/ngmodules/src/app/app-routing.module.ts @@ -3,8 +3,8 @@ import { Routes, RouterModule } from '@angular/router'; export const routes: Routes = [ { path: '', redirectTo: 'contact', pathMatch: 'full'}, - { path: 'items', loadChildren: './items/items.module#ItemsModule' }, - { path: 'customers', loadChildren: './customers/customers.module#CustomersModule' } + { path: 'items', loadChildren: () => import('./items/items.module').then(mod => mod.ItemsModule) }, + { path: 'customers', loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule) } ]; @NgModule({ diff --git a/aio/content/examples/router/src/app/app-routing.module.5.ts b/aio/content/examples/router/src/app/app-routing.module.5.ts index a120771875..e99a6cb3c4 100644 --- a/aio/content/examples/router/src/app/app-routing.module.5.ts +++ b/aio/content/examples/router/src/app/app-routing.module.5.ts @@ -20,7 +20,7 @@ const appRoutes: Routes = [ // #docregion admin, admin-1 { path: 'admin', - loadChildren: './admin/admin.module#AdminModule', + loadChildren: () => import('./admin/admin.module').then(mod => mod.AdminModule), // #enddocregion admin-1 canLoad: [AuthGuard] // #docregion admin-1 diff --git a/aio/content/examples/router/src/app/app-routing.module.6.ts b/aio/content/examples/router/src/app/app-routing.module.6.ts index e1c81f2498..d060fad168 100644 --- a/aio/content/examples/router/src/app/app-routing.module.6.ts +++ b/aio/content/examples/router/src/app/app-routing.module.6.ts @@ -21,12 +21,12 @@ const appRoutes: Routes = [ }, { path: 'admin', - loadChildren: './admin/admin.module#AdminModule', + loadChildren: () => import('./admin/admin.module').then(mod => mod.AdminModule), canLoad: [AuthGuard] }, { path: 'crisis-center', - loadChildren: './crisis-center/crisis-center.module#CrisisCenterModule' + loadChildren: () => import('./crisis-center/crisis-center.module').then(mod => mod.CrisisCenterModule) }, { path: '', redirectTo: '/heroes', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } diff --git a/aio/content/examples/router/src/app/app-routing.module.ts b/aio/content/examples/router/src/app/app-routing.module.ts index ffad588287..fc8bcb3b44 100644 --- a/aio/content/examples/router/src/app/app-routing.module.ts +++ b/aio/content/examples/router/src/app/app-routing.module.ts @@ -17,13 +17,13 @@ const appRoutes: Routes = [ }, { path: 'admin', - loadChildren: './admin/admin.module#AdminModule', + loadChildren: () => import('./admin/admin.module').then(mod => mod.AdminModule), canLoad: [AuthGuard] }, // #docregion preload-v2 { path: 'crisis-center', - loadChildren: './crisis-center/crisis-center.module#CrisisCenterModule', + loadChildren: () => import('./crisis-center/crisis-center.module').then(mod => mod.CrisisCenterModule), data: { preload: true } }, // #enddocregion preload-v2 diff --git a/aio/content/examples/testing/src/app/app-routing.module.ts b/aio/content/examples/testing/src/app/app-routing.module.ts index 7630c216f6..98c92a1f5a 100644 --- a/aio/content/examples/testing/src/app/app-routing.module.ts +++ b/aio/content/examples/testing/src/app/app-routing.module.ts @@ -8,7 +8,7 @@ import { AboutComponent } from './about/about.component'; RouterModule.forRoot([ { path: '', redirectTo: 'dashboard', pathMatch: 'full'}, { path: 'about', component: AboutComponent }, - { path: 'heroes', loadChildren: './hero/hero.module#HeroModule'} + { path: 'heroes', loadChildren: () => import('./hero/hero.module').then(mod => mod.HeroModule)} ]) ], exports: [ RouterModule ] // re-export the module declarations diff --git a/aio/content/guide/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md index dc21eddba7..eee72d86f8 100644 --- a/aio/content/guide/lazy-loading-ngmodules.md +++ b/aio/content/guide/lazy-loading-ngmodules.md @@ -143,7 +143,7 @@ In `AppRoutingModule`, update the `routes` array with the following: -The import statements stay the same. The first two paths are the routes to the `CustomersModule` and the `OrdersModule` respectively. Notice that the lazy loading syntax uses `loadChildren` followed by a string that is the relative path to the module, a hash mark or `#`, and the module’s class name. +The import statements stay the same. The first two paths are the routes to the `CustomersModule` and the `OrdersModule` respectively. Notice that the lazy loading syntax uses `loadChildren` followed by a function that uses the browser's built-in `import('...')` syntax for dynamic imports. The import path is the relative path to the module. ### Inside the feature module diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index 44f1d5452d..ab87bd36d8 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -3954,10 +3954,10 @@ Users will still visit `/admin` and the `AdminComponent` still serves as the *Ro Open the `AppRoutingModule` and add a new `admin` route to its `appRoutes` array. -Give it a `loadChildren` property instead of a `children` property, set to the address of the `AdminModule`. -The address is the `AdminModule` file location (relative to the app root), -followed by a `#` separator, followed by the name of the exported module class, `AdminModule`. - +Give it a `loadChildren` property instead of a `children` property. +The `loadChildren` property takes a function that returns a promise using the browser's built-in syntax for lazy loading code using dynamic imports `import('...')`. +The path is the location of the `AdminModule` (relative to the app root). +After the code is requested and loaded, the `Promise` resolves an object that contains the `NgModule`, in this case the `AdminModule`.