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

feat(router): Allow loadChildren to return a Route array #45700

Closed
wants to merge 1 commit into from

Conversation

atscott
Copy link
Contributor

@atscott atscott commented Apr 20, 2022

This commit expands the LoadChildrenCallback to accept returning Routes
in addition to the existing NgModule type. In addition, it adds a
check to ensure these loaded routes all use standalone components.
The components must be standalone because if they were not,
we would not have the required NgModule which the component is declared in.

Existing API:

{path: 'lazy/route', loadChildren: import('./lazy').then(m => m.LazyModule)}

@NgModule({
  imports: [
    ExtraCmpModule,
    RouterModule.forChild([
      {path: 'extra/route', component: ExtraCmp},
    ]),
  ],
})
export class LazyModule {}

The new API for lazy loading route configs with standalone components
(no NgModule) is to expand loadChildren to allow returning simply a Routes array.

// parent.ts
{
  path: 'parent',
  loadChildren: () => import('./children').then(m => m.ROUTES),
}

// children.ts
export const ROUTES: Route[] = [
  {path: 'child', component: ChildCmp},
];

Note that this includes minimal documentation updates. We need to
include a holistic update to the documentation for standalone components
in the future that includes this feature.

@atscott atscott added area: router target: minor This PR is targeted for the next minor release labels Apr 20, 2022
@ngbot ngbot bot added this to the Backlog milestone Apr 20, 2022
@atscott atscott force-pushed the loadChildrenRoutes branch 2 times, most recently from 5a0cf43 to 37dd312 Compare April 20, 2022 19:56
Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

packages/router/src/utils/config.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@jessicajaniuk jessicajaniuk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reviewed-for: public-api

Copy link
Member

@alxhub alxhub left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed-for: public-api, fw-core, fw-router

packages/router/src/utils/config.ts Show resolved Hide resolved
Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great 👍

packages/router/src/router_config_loader.ts Show resolved Hide resolved
Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed-for: public-api

@AndrewKushnir AndrewKushnir removed the request for review from dylhunn April 22, 2022 00:00
This commit expands the `LoadChildrenCallback` to accept returning `Routes`
in addition to the existing `NgModule` type. In addition, it adds a
check to ensure these loaded routes all use standalone components.
The components must be standalone because if they were not,
we would not have the required `NgModule` which the component is declared in.

Existing API:
```
{path: 'lazy/route', loadChildren: import('./lazy').then(m => m.LazyModule)}

@NgModule({
  imports: [
    ExtraCmpModule,
    RouterModule.forChild([
      {path: 'extra/route', component: ExtraCmp},
    ]),
  ],
})
export class LazyModule {}
```

The new API for lazy loading route configs with standalone components
(no NgModule) is to expand `loadChildren` to allow returning simply a `Routes` array.

```
// parent.ts
{
  path: 'parent',
  loadChildren: () => import('./children').then(m => m.ROUTES),
}

// children.ts
export const ROUTES: Route[] = [
  {path: 'child', component: ChildCmp},
];
```

Note that this includes minimal documentation updates. We need to
include a holistic update to the documentation for standalone components
in the future that includes this feature.
@atscott
Copy link
Contributor Author

atscott commented Apr 22, 2022

presubmit

merge assistance: requires an update to the g3 patch: http://cl/443671599

@atscott atscott added action: merge The PR is ready for merge by the caretaker merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note labels Apr 22, 2022
@atscott
Copy link
Contributor Author

atscott commented Apr 22, 2022

This PR was merged into the repository by commit 4962a4a.

@atscott atscott closed this in 4962a4a Apr 22, 2022
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators May 23, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker area: router merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note target: minor This PR is targeted for the next minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants