[Feature]: Allow for lazy loading of each route config #50432
Description
Which @angular/* package(s) are relevant/related to the feature request?
router
Description
Currently, you can eagerly load an entire route config, but if you include providers, guards, and other tokens they will be included in the main bundle even for a lazy loaded component/routes.
[
{
path: 'page',
canActivate: [authGuardFunction, permissionsGuardFunction],
loadChldren: () => import('features/page')
},
{
path: 'other-page',
canActivate: [authGuardFunction, permissionsGuardFunction],
loadComponent: () => import('about.component')
}
]This feature would allow you to provide a route config with a path and a loadConfig/loadRoute that resolves to the rest of the route configuration, and would be resolved on the matching of that path before proceeding. This would reduce the main bundle size for route-level configuration, while allowing the entire routing tree to be defined eagerly.
Proposed solution
Allow lazy loading of the entire route config except for the path
// features/page.ts
const config: RouteConfig = {
canActivate: [authGuardFunction, permissionsGuardFunction],
component: FeatureHome,
children: [
// more lazy loaded routes
]
}
export default config;[
{
path: 'page',
loadConfig: () => import('features/page')
// or
loadRoute: () => import('features/page')
}
]Alternatives considered
In Analog, file-based routing is used along with loadChildren to lazy load the entire route config
[
{
path: 'page',
loadChildren: () => import('features/page').then(m => {
return [
{
path: '',
component: m.default,
...m.routeMeta
}
];
})
}
]