Skip to content

Commit 05c08ca

Browse files
JoostKalxhub
JoostK
authored and
alxhub
committed
docs: refactor example apps to use dynamic imports for loadChildren (#43591)
The string syntax for `loadChildren` has been deprecated and is being removed, so this commit refactors the examples to the new syntax. PR Close #43591
1 parent 7dccbdd commit 05c08ca

6 files changed

Lines changed: 30 additions & 13 deletions

File tree

‎modules/playground/src/routing/app/inbox-app.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,8 @@ export class DraftsCmp {
124124

125125
export const ROUTER_CONFIG = [
126126
{path: '', pathMatch: 'full', redirectTo: 'inbox'}, {path: 'inbox', component: InboxCmp},
127-
{path: 'drafts', component: DraftsCmp}, {path: 'detail', loadChildren: 'app/inbox-detail.js'}
127+
{path: 'drafts', component: DraftsCmp},
128+
{path: 'detail', loadChildren: () => import('./inbox-detail.js').then(mod => mod.default)}
128129
];
129130

130131
@Component({selector: 'inbox-app', templateUrl: './inbox-app.html'})

‎packages/compiler-cli/integrationtest/ngtools_src/app.module.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,10 @@ export class HomeView {
2121
declarations: [AppComponent, HomeView],
2222
imports: [
2323
BrowserModule, RouterModule.forRoot([
24-
{path: 'lazy', loadChildren: './lazy.module#LazyModule'},
25-
{path: 'feature2', loadChildren: 'feature2/feature2.module#Feature2Module'},
24+
{path: 'lazy', loadChildren: () => import('./lazy.module').then(mod => mod.LazyModule)}, {
25+
path: 'feature2',
26+
loadChildren: () => import('./feature2/feature2.module').then(mod => mod.Feature2Module)
27+
},
2628
{path: '', component: HomeView}
2729
])
2830
],

‎packages/compiler-cli/integrationtest/ngtools_src/feature/lazy-feature.module.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,15 @@ export class LazyFeatureComponent {
1515

1616
@NgModule({
1717
imports: [RouterModule.forChild([
18-
{path: '', component: LazyFeatureComponent, pathMatch: 'full'},
19-
{path: 'feature', loadChildren: './feature.module#FeatureModule'},
20-
{path: 'nested-feature', loadChildren: './lazy-feature-nested.module#LazyFeatureNestedModule'}
18+
{path: '', component: LazyFeatureComponent, pathMatch: 'full'}, {
19+
path: 'feature',
20+
loadChildren: () => import('./feature.module').then(mod => mod.FeatureModule)
21+
},
22+
{
23+
path: 'nested-feature',
24+
loadChildren: () =>
25+
import('./lazy-feature-nested.module').then(mod => mod.LazyFeatureNestedModule)
26+
}
2127
])],
2228
declarations: [LazyFeatureComponent]
2329
})

‎packages/compiler-cli/integrationtest/ngtools_src/feature2/feature2.module.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,11 @@ export class FeatureComponent {
1717
declarations: [FeatureComponent],
1818
imports: [RouterModule.forChild([
1919
{path: '', component: FeatureComponent},
20-
{path: 'd', loadChildren: './default.module'},
21-
{path: 'e', loadChildren: 'feature/feature.module#FeatureModule'},
20+
{path: 'd', loadChildren: () => import('./default.module').then(mod => mod.default)},
21+
{
22+
path: 'e',
23+
loadChildren: () => import('../feature/feature.module').then(mod => mod.FeatureModule)
24+
},
2225
])]
2326
})
2427
export class Feature2Module {

‎packages/compiler-cli/integrationtest/ngtools_src/lazy.module.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,14 @@ export class LazyComponent {
1515

1616
@NgModule({
1717
imports: [[RouterModule.forChild([
18-
{path: '', component: LazyComponent, pathMatch: 'full'},
19-
{path: 'feature', loadChildren: './feature/feature.module#FeatureModule'},
20-
{path: 'lazy-feature', loadChildren: './feature/lazy-feature.module#LazyFeatureModule'}
18+
{path: '', component: LazyComponent, pathMatch: 'full'}, {
19+
path: 'feature',
20+
loadChildren: () => import('./feature/feature.module').then(mod => mod.FeatureModule)
21+
},
22+
{
23+
path: 'lazy-feature',
24+
loadChildren: () => import('./feature/lazy-feature.module').then(mod => mod.LazyFeatureModule)
25+
}
2126
])]],
2227
declarations: [LazyComponent]
2328
})

‎packages/router/src/interfaces.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -430,7 +430,7 @@ export interface Resolve<T> {
430430
* {
431431
* path: 'team/:id',
432432
* component: TeamComponent,
433-
* loadChildren: 'team.js',
433+
* loadChildren: () => import('./team').then(mod => mod.TeamModule),
434434
* canLoad: [CanLoadTeamSection]
435435
* }
436436
* ])
@@ -449,7 +449,7 @@ export interface Resolve<T> {
449449
* {
450450
* path: 'team/:id',
451451
* component: TeamComponent,
452-
* loadChildren: 'team.js',
452+
* loadChildren: () => import('./team').then(mod => mod.TeamModule),
453453
* canLoad: ['canLoadTeamSection']
454454
* }
455455
* ])

0 commit comments

Comments
 (0)