Support for default exports in `loadChildren` and `loadComponent` callbacks
See original GitHub issueWhich @angular/* package(s) are relevant/related to the feature request?
router
Description
Support for default ES module exports will reduce repetitive code in routes config.
// app.routes.ts
export const appRoutes: Routes = [
{
path: '',
- loadComponent: () => import('./home/home.component').then((m) => m.HomeComponent),
+ loadComponent: () => import('./home/home.component'),
},
{
path: 'books',
- loadChildren: () => import('./books/books.module').then((m) => m.BooksModule),
+ loadChildren: () => import('./books/books.module'),
},
{
path: 'authors',
- loadChildren: () => import('./authors/authors.routes').then((m) => m.authorsRoutes),
+ loadChildren: () => import('./authors/authors.routes'),
}
];
// home.component.ts
@Component({ /* ... */ })
-export class HomeComponent {}
+export default class HomeComponent {}
// books.module.ts
@NgModule({ /* ... */ })
-export class BooksModule {}
+export default class BooksModule {}
Proposed solution
This feature will not introduce breaking changes, which means that we’ll still be able to use .then((esModule) => esModule.exportedMember)
. Also, there will be a compilation error if an imported module does not have a default export.
I will create the PR for this feature if the feature request is accepted. 🙂
Alternatives considered
Using then((esModule) => esModule.ngModuleOrRoutesOrComponent)
for each lazy loaded module, component, or routes.
Issue Analytics
- State:
- Created a year ago
- Reactions:32
- Comments:5 (3 by maintainers)
Top Results From Across the Web
LoadChildrenCallback - Angular
If the lazy-loaded routes are exported via a default export, the .then can be omitted: ... loadChildren](api/router/Route#loadChildren) @publicApi.
Read more >warning: lazy: expected the result of a dynamic import() call. instead ...
This syntax is only supported for Default exports. ... It's saying it expects the Employees component to be the default export of the...
Read more >Sheik Althaf (@SheikAlthafDev) / Twitter
Support for default exports in `loadChildren` and `loadComponent ` callbacks · Issue #46323 ·... Which @angular/* package(s) are relevant/related to the ...
Read more >Lazy Load Standalone Components with "loadComponent"
export const AppRoutes: Routes = [ { path: 'menu', loadChildren: ... So what can standalone components do, how do they help us?
Read more >Using Different Layout Frames For Different Routes In Angular
First, make an enum AppLayoutType that will hold the types of layout frames our application will need. export enum AppLayoutType { Default =...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Additional context: this question was included into the Standalone APIs RFC and the decision was to avoid adding this for now due to a mixed signal from the community, see https://github.com/angular/angular/discussions/45554#discussioncomment-2716216:
This feature already implemented in PR #47586