docs: refactor example apps to use dynamic imports for loadChildren

The string syntax for `loadChildren` has been deprecated and is being removed, so this commit refactors the examples to the new syntax.
JoostK · Sep 25, 2021 · Sep 24, 2021 · Sep 25, 2021 · Sep 25, 2021 · Sep 27, 2021
commit 6320c0028e1267683d18543161b5e48b79b562f6
diff --git a/modules/playground/src/routing/app/inbox-app.ts b/modules/playground/src/routing/app/inbox-app.ts
@@ -124,7 +124,8 @@ export class DraftsCmp {
 
 export const ROUTER_CONFIG = [
   {path: '', pathMatch: 'full', redirectTo: 'inbox'}, {path: 'inbox', component: InboxCmp},
-  {path: 'drafts', component: DraftsCmp}, {path: 'detail', loadChildren: 'app/inbox-detail.js'}
+  {path: 'drafts', component: DraftsCmp},
+  {path: 'detail', loadChildren: () => import('./inbox-detail.js').then(mod => mod.default)}
 ];
 
 @Component({selector: 'inbox-app', templateUrl: './inbox-app.html'})

diff --git a/packages/compiler-cli/integrationtest/ngtools_src/app.module.ts b/packages/compiler-cli/integrationtest/ngtools_src/app.module.ts
@@ -21,8 +21,10 @@ export class HomeView {
   declarations: [AppComponent, HomeView],
   imports: [
     BrowserModule, RouterModule.forRoot([
-      {path: 'lazy', loadChildren: './lazy.module#LazyModule'},
-      {path: 'feature2', loadChildren: 'feature2/feature2.module#Feature2Module'},
+      {path: 'lazy', loadChildren: () => import('./lazy.module').then(mod => mod.LazyModule)}, {
+        path: 'feature2',
+        loadChildren: () => import('./feature2/feature2.module').then(mod => mod.Feature2Module)
+      },
       {path: '', component: HomeView}
     ])
   ],

diff --git a/packages/compiler-cli/integrationtest/ngtools_src/feature/lazy-feature.module.ts b/packages/compiler-cli/integrationtest/ngtools_src/feature/lazy-feature.module.ts
@@ -15,9 +15,15 @@ export class LazyFeatureComponent {
 
 @NgModule({
   imports: [RouterModule.forChild([
-    {path: '', component: LazyFeatureComponent, pathMatch: 'full'},
-    {path: 'feature', loadChildren: './feature.module#FeatureModule'},
-    {path: 'nested-feature', loadChildren: './lazy-feature-nested.module#LazyFeatureNestedModule'}
+    {path: '', component: LazyFeatureComponent, pathMatch: 'full'}, {
+      path: 'feature',
+      loadChildren: () => import('./feature.module').then(mod => mod.FeatureModule)
+    },
+    {
+      path: 'nested-feature',
+      loadChildren: () =>
+          import('./lazy-feature-nested.module').then(mod => mod.LazyFeatureNestedModule)
+    }
   ])],
   declarations: [LazyFeatureComponent]
 })

diff --git a/packages/compiler-cli/integrationtest/ngtools_src/feature2/feature2.module.ts b/packages/compiler-cli/integrationtest/ngtools_src/feature2/feature2.module.ts
@@ -17,8 +17,11 @@ export class FeatureComponent {
   declarations: [FeatureComponent],
   imports: [RouterModule.forChild([
     {path: '', component: FeatureComponent},
-    {path: 'd', loadChildren: './default.module'},
-    {path: 'e', loadChildren: 'feature/feature.module#FeatureModule'},
+    {path: 'd', loadChildren: () => import('./default.module').then(mod => mod.default)},
+    {
+      path: 'e',
+      loadChildren: () => import('../feature/feature.module').then(mod => mod.FeatureModule)
+    },
   ])]
 })
 export class Feature2Module {

diff --git a/packages/compiler-cli/integrationtest/ngtools_src/lazy.module.ts b/packages/compiler-cli/integrationtest/ngtools_src/lazy.module.ts
@@ -15,9 +15,14 @@ export class LazyComponent {
 
 @NgModule({
   imports: [[RouterModule.forChild([
-    {path: '', component: LazyComponent, pathMatch: 'full'},
-    {path: 'feature', loadChildren: './feature/feature.module#FeatureModule'},
-    {path: 'lazy-feature', loadChildren: './feature/lazy-feature.module#LazyFeatureModule'}
+    {path: '', component: LazyComponent, pathMatch: 'full'}, {
+      path: 'feature',
+      loadChildren: () => import('./feature/feature.module').then(mod => mod.FeatureModule)
+    },
+    {
+      path: 'lazy-feature',
+      loadChildren: () => import('./feature/lazy-feature.module').then(mod => mod.LazyFeatureModule)
+    }
   ])]],
   declarations: [LazyComponent]
 })

diff --git a/packages/router/src/interfaces.ts b/packages/router/src/interfaces.ts
@@ -430,7 +430,7 @@ export interface Resolve<T> {
  *       {
  *         path: 'team/:id',
  *         component: TeamComponent,
- *         loadChildren: 'team.js',
+ *         loadChildren: () => import('./team').then(mod => mod.TeamModule),
  *         canLoad: [CanLoadTeamSection]
  *       }
  *     ])
@@ -449,7 +449,7 @@ export interface Resolve<T> {
  *       {
  *         path: 'team/:id',
  *         component: TeamComponent,
- *         loadChildren: 'team.js',
+ *         loadChildren: () => import('./team').then(mod => mod.TeamModule),
  *         canLoad: ['canLoadTeamSection']
  *       }
  *     ])