question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for default exports in `loadChildren` and `loadComponent` callbacks

See original GitHub issue

Which @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:closed
  • Created a year ago
  • Reactions:32
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

7reactions
AndrewKushnircommented, Jun 10, 2022

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:

Incorporating this feedback in our design, we do not intend to add default imports unwrapping to the router's 
loadComponent and loadChildren functions - we got mixed signals from the community and at the moment 
we prefer to stick to more verbose but clear and explicit API. We plan to revisit the advantages and 
disadvantages of default exports outside the context of standalone.
2reactions
misha98857commented, Nov 19, 2022

This feature already implemented in PR #47586

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found