Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Expand Up @@ -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: '',
Expand Down
4 changes: 2 additions & 2 deletions aio/content/examples/ngmodules/src/app/app-routing.module.ts
Expand Up @@ -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({
Expand Down
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions aio/content/examples/router/src/app/app-routing.module.6.ts
Expand Up @@ -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 }
Expand Down
4 changes: 2 additions & 2 deletions aio/content/examples/router/src/app/app-routing.module.ts
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion aio/content/examples/testing/src/app/app-routing.module.ts
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion aio/content/guide/lazy-loading-ngmodules.md
Expand Up @@ -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

Expand Down
8 changes: 4 additions & 4 deletions aio/content/guide/router.md
Expand Up @@ -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)">

Expand Down