Skip to content

feat(router): Support lazy loading standalone components with loadComponent#45705

Closed
atscott wants to merge 1 commit intoangular:masterfrom
atscott:loadComponent
Closed

feat(router): Support lazy loading standalone components with loadComponent#45705
atscott wants to merge 1 commit intoangular:masterfrom
atscott:loadComponent

Conversation

@atscott
Copy link
Contributor

@atscott atscott commented Apr 20, 2022

Note: this is rebased on top of #45700 which is rebased on the standalone branch

Similarly to the symmetry being strengthened between children and loadChildren,
a new loadComponent property will be introduced as the asynchronous version of component.
This will allow for direct single-component lazy loading:

{path: 'lazy/a', loadComponent:
  () => import('./lazy/a.component').then(m => m.ACmp)},
{path: 'lazy/b', loadComponent:
  () => import('./lazy/b.component').then(m => m.BCmp)},

This option requires that the component being loaded is standalone and
is implemented as a runtime check.

Other notes:

  • Components are not loaded until all guards and resolvers complete.
  • Loading the component is included in the function passed to the router
    preloading strategy
  • RouteConfigLoadStart and RouteConfigLoadEnd events emit at the
    start and end of the component loading
  • CanLoad guards do not apply to loadComponent. canActivate
    should be used instead, just like you would do if it were simply
    component instead.

@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
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 👍 Thanks!

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

@atscott atscott force-pushed the loadComponent branch 2 times, most recently from 4ab5864 to e14e4b1 Compare April 22, 2022 16:59
@atscott atscott marked this pull request as ready for review April 22, 2022 16:59
@atscott atscott force-pushed the loadComponent branch 9 times, most recently from c3e56bc to e29da31 Compare April 22, 2022 19:36
@atscott
Copy link
Contributor Author

atscott commented Apr 22, 2022

presubmit with updated patch

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.

LGTM 🍪

reviewed-for: public-api, size-tracking

@pullapprove pullapprove bot requested a review from alxhub April 25, 2022 15:08
@pullapprove pullapprove bot requested a review from alxhub April 25, 2022 15:11
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

@pullapprove pullapprove bot requested review from AndrewKushnir and alxhub April 25, 2022 15:14
@pullapprove pullapprove bot requested a review from jessicajaniuk April 25, 2022 15:14
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: size-tracking

…mponent`

Similarly to the symmetry being strengthened between children and loadChildren,
a new loadComponent property will be introduced as the asynchronous version of component.
This will allow for direct single-component lazy loading:

```
{path: 'lazy/a', loadComponent:
  () => import('./lazy/a.component').then(m => m.ACmp)},
{path: 'lazy/b', loadComponent:
  () => import('./lazy/b.component').then(m => m.BCmp)},
```

This option requires that the component being loaded is standalone and
is implemented as a runtime check.

Other notes:
* Components are not loaded until all guards and resolvers complete.
* Loading the component is included in the function passed to the router
  preloading strategy
* `RouteConfigLoadStart` and `RouteConfigLoadEnd` events emit at the
  start and end of the component loading
* `CanLoad` guards _do not_ apply to `loadComponent`. `canActivate`
  should be used instead, just like you would do if it were simply
  `component` instead.
@atscott atscott added the action: merge The PR is ready for merge by the caretaker label Apr 25, 2022
@atscott
Copy link
Contributor Author

atscott commented Apr 25, 2022

This PR was merged into the repository by commit 50004c1.

@atscott atscott closed this in 50004c1 Apr 25, 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 26, 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 target: minor This PR is targeted for the next minor release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants