docs: use dynamic import syntax in examples using lazy loading (angular#30563)

PR Close angular#30563

Author: brandonroberts

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: '',

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({

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

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 }

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

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

aio/content/guide/lazy-loading-ngmodules.md

@@ -143,7 +143,7 @@ In `AppRoutingModule`, update the `routes` array with the following:
 </code-example>
 
 
-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
 

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`.
 
 <code-example path="router/src/app/app-routing.module.5.ts" region="admin-1" header="app-routing.module.ts (load children)">