Support for default exports in loadChildren and loadComponent callbacks

[markostanimirovic]

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.

[AndrewKushnir]

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 #45554 (comment):

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.

[markostanimirovic]

Thanks @AndrewKushnir.

I've updated the description to avoid potential confusion about this feature:

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.

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[misha98857]

This feature already implemented in PR #47586

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}