feat(router): allow guards and resolvers to be plain functions by atscott · Pull Request #46684 · angular/angular

atscott · 2022-07-02T00:19:47Z

The current Router APIs require guards/resolvers to be present in the DI tree. This is because we want to treat all guards/resolvers equally and some may require dependencies. This requirement results in quite a lot of boilerplate for guards. Here are two examples:

const MY_GUARD = new InjectionToken<any>('my_guard');
…
providers: {provide: MY_GUARD, useValue: () => window.someGlobalState}
…
const route = {path: 'somePath', canActivate: [MY_GUARD]}

@Injectable({providedIn: 'root'})
export class MyGuardWithDependency {
  constructor(private myDep: MyDependency) {}

  canActivate() {
    return myDep.canActivate();
  }
}
…
const route = {path: 'somePath', canActivate: [MyGuardWithDependency]}

Notice that even when we want to write a simple guard that has no dependencies as in the first example, we still have to write either an InjectionToken or an Injectable class.

With this commit router guards and resolvers can be plain old functions.
For example:

const route = {path: 'somePath', component: EditCmp, canDeactivate: [(component: EditCmp) => !component.hasUnsavedChanges]}

Additionally, these functions can still use Angular DI with inject from @angular/core.

const route = {path: 'somePath', canActivate: [() => inject(MyDependency).canActivate()]}

Reviewer notes:

We should deprecate the Token and class-based guards/resolvers in a follow up. Doing so here would make landing the feature change more difficult.
With the above, documentation updates were kept minimal. I have updated the API docs on the Route to indicate pure functions can be used instead of the previous token documentation (which is by far less common and cumbersome). Additionally, the Tour of Heroes only uses the class-based Injectable guards. These examples have also been kept unchanged since we haven't that deprecation will come later. Until then, the most common use-case is what's documented in the Tour of Heroes.
A migration can be written along with or as a follow up to the deprecation.
The size increased, but is actually pretty small considering the scope of the feature. In the long run, this will go back down when we no longer need to handle the deprecated/removed ways of doing guards/resolvers.

goldens/public-api/router/index.md

atscott · 2022-08-02T20:06:13Z

TGP

@Injectable

The current Router APIs require guards/resolvers to be present in the DI tree. This is because we want to treat all guards/resolvers equally and some may require dependencies. This requirement results in quite a lot of boilerplate for guards. Here are two examples: ``` const MY_GUARD = new InjectionToken<any>('my_guard'); … providers: {provide: MY_GUARD, useValue: () => window.someGlobalState} … const route = {path: 'somePath', canActivate: [MY_GUARD]} ``` ``` @Injectable({providedIn: 'root'}) export class MyGuardWithDependency { constructor(private myDep: MyDependency) {} canActivate() { return myDep.canActivate(); } } … const route = {path: 'somePath', canActivate: [MyGuardWithDependency]} ``` Notice that even when we want to write a simple guard that has no dependencies as in the first example, we still have to write either an InjectionToken or an Injectable class. With this commit router guards and resolvers can be plain old functions. For example: ``` const route = {path: 'somePath', component: EditCmp, canDeactivate: [(component: EditCmp) => !component.hasUnsavedChanges]} ``` Additionally, these functions can still use Angular DI with `inject` from `@angular/core`. ``` const route = {path: 'somePath', canActivate: [() => inject(MyDependency).canActivate()]} ```

jessicajaniuk

LGTM 🍪

reviewed-for: public-api, size-tracking, fw-core

packages/core/src/render3/jit/module.ts

packages/router/test/integration.spec.ts

goldens/public-api/router/index.md

pkozlowski-opensource

LGTM, I would like to see https://github.com/angular/angular/pull/46684/files#r937087149 addressed, though.

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

dylhunn

revieed-for: public-api, size-tracking

AndrewKushnir

LGTM 👍

packages/core/src/render3/jit/module.ts

packages/router/src/models.ts

packages/router/src/operators/check_guards.ts

atscott · 2022-08-05T17:36:48Z

This PR was merged into the repository by commit 0abb67a.

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/animations](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fanimations/14.1.3/14.2.0) | | [@angular/common](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fcommon/14.1.3/14.2.0) | | [@angular/compiler](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fcompiler/14.1.3/14.2.0) | | [@angular/compiler-cli](https://github.com/angular/angular/tree/main/packages/compiler-cli) ([source](https://github.com/angular/angular)) | devDependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fcompiler-cli/14.1.3/14.2.0) | | [@angular/core](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fcore/14.1.3/14.2.0) | | [@angular/forms](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fforms/14.1.3/14.2.0) | | [@angular/platform-browser](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser/14.1.3/14.2.0) | | [@angular/platform-browser-dynamic](https://github.com/angular/angular) | dependencies | minor | [`14.1.3` -> `14.2.0`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser-dynamic/14.1.3/14.2.0) | --- ### Release Notes <details> <summary>angular/angular</summary> ### [`v14.2.0`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#1420-2022-08-25) [Compare Source](angular/angular@14.1.3...14.2.0) ##### animations | Commit | Type | Description | | -- | -- | -- | | [b96e571897](angular/angular@b96e571) | fix | fix stagger timing not handling params ([#47208](angular/angular#47208)) | ##### common | Commit | Type | Description | | -- | -- | -- | | [b380fdd59e](angular/angular@b380fdd) | feat | add a density cap for image srcsets ([#47082](angular/angular#47082)) | | [7ce497e5bc](angular/angular@7ce497e) | feat | add built-in Imgix loader ([#47082](angular/angular#47082)) | | [bff870db61](angular/angular@bff870d) | feat | add cloudflare loader ([#47082](angular/angular#47082)) | | [86e77a5d55](angular/angular@86e77a5) | feat | add Image directive skeleton ([#45627](angular/angular#45627)) ([#47082](angular/angular#47082)) | | [0566205a02](angular/angular@0566205) | feat | Add image lazy loading and fetchpriority ([#47082](angular/angular#47082)) | | [4e952ba216](angular/angular@4e952ba) | feat | add loaders for cloudinary & imagekit ([#47082](angular/angular#47082)) | | [e854a8cdde](angular/angular@e854a8c) | feat | add loading attr to NgOptimizedImage ([#47082](angular/angular#47082)) | | [8d3701cb4c](angular/angular@8d3701c) | feat | add warnings re: image distortion ([#47082](angular/angular#47082)) | | [d5f7da2120](angular/angular@d5f7da2) | feat | define public API surface for NgOptimizedImage directive ([#47082](angular/angular#47082)) | | [d3c3426aa4](angular/angular@d3c3426) | feat | detect LCP images in `NgOptimizedImage` and assert if `priority` is set ([#47082](angular/angular#47082)) | | [451b85ca17](angular/angular@451b85c) | feat | explain why width/height is required ([#47082](angular/angular#47082)) | | [586274fe65](angular/angular@586274f) | feat | provide an ability to exclude origins from preconnect checks in NgOptimizedImage ([#47082](angular/angular#47082)) | | [57f3386e5b](angular/angular@57f3386) | feat | support custom srcset attributes in NgOptimizedImage ([#47082](angular/angular#47082)) | | [7baf9a46cd](angular/angular@7baf9a4) | feat | verify that priority images have preconnect links ([#47082](angular/angular#47082)) | | [f81765b333](angular/angular@f81765b) | feat | warn if rendered size is much smaller than intrinsic ([#47082](angular/angular#47082)) | | [e2ab99b95e](angular/angular@e2ab99b) | fix | allow null/undefined to be passed to ngClass input ([#39280](angular/angular#39280)) ([#46906](angular/angular#46906)) | | [bedf537951](angular/angular@bedf537) | fix | allow null/undefined to be passed to ngStyle input ([#47069](angular/angular#47069)) | | [f9511bf6e8](angular/angular@f9511bf) | fix | avoid interacting with a destroyed injector ([#47243](angular/angular#47243)) | | [dc29e21b14](angular/angular@dc29e21) | fix | consider density descriptors with multiple digits as valid ([#47230](angular/angular#47230)) | | [801daf82d1](angular/angular@801daf8) | fix | detect `data:` and `blob:` inputs in `NgOptimizedImage` directive ([#47082](angular/angular#47082)) | | [fff8056e7f](angular/angular@fff8056) | fix | fix formatting on oversized image error ([#47188](angular/angular#47188)) ([#47232](angular/angular#47232)) | | [1ca2ce19ab](angular/angular@1ca2ce1) | fix | remove default for image width ([#47082](angular/angular#47082)) | | [c5db867ddc](angular/angular@c5db867) | fix | remove duplicate deepForEach ([#47189](angular/angular#47189)) | | [1cf43deb18](angular/angular@1cf43de) | fix | sanitize `rawSrc` and `rawSrcset` values in NgOptimizedImage directive ([#47082](angular/angular#47082)) | | [d71dfe931f](angular/angular@d71dfe9) | fix | set bound width and height onto host element ([#47082](angular/angular#47082)) | | [32caa8b669](angular/angular@32caa8b) | fix | support density descriptors with 2+ decimals ([#47197](angular/angular#47197)) ([#47232](angular/angular#47232)) | | [ae4405f0bf](angular/angular@ae4405f) | fix | throw if srcset is used with rawSrc ([#47082](angular/angular#47082)) | | [0c8eb8bc82](angular/angular@0c8eb8b) | perf | monitor LCP only for images without `priority` attribute ([#47082](angular/angular#47082)) | ##### compiler-cli | Commit | Type | Description | | -- | -- | -- | | [ea89677c12](angular/angular@ea89677) | feat | support more recent version of `tsickle` ([#47018](angular/angular#47018)) | ##### core | Commit | Type | Description | | -- | -- | -- | | [d1e83e1b30](angular/angular@d1e83e1) | feat | add `createComponent` function ([#46685](angular/angular#46685)) | | [10becab70e](angular/angular@10becab) | feat | add `reflectComponentType` function ([#46685](angular/angular#46685)) | | [4b377d3a6d](angular/angular@4b377d3) | feat | introduce createApplication API ([#46475](angular/angular#46475)) | | [31429eaccc](angular/angular@31429ea) | feat | support TypeScript 4.8 ([#47038](angular/angular#47038)) | | [796840209c](angular/angular@7968402) | fix | align TestBed interfaces and implementation ([#46635](angular/angular#46635)) | ##### forms | Commit | Type | Description | | -- | -- | -- | | [426af91a42](angular/angular@426af91) | feat | add `FormBuilder.record()` method ([#46485](angular/angular#46485)) | | [b302797de4](angular/angular@b302797) | fix | Correctly infer `FormBuilder` types involving `[value, validators]` shorthand in more cases. ([#47034](angular/angular#47034)) | ##### language-service | Commit | Type | Description | | -- | -- | -- | | [598b72bd05](angular/angular@598b72b) | feat | support fix the component missing member ([#46764](angular/angular#46764)) | ##### platform-browser | Commit | Type | Description | | -- | -- | -- | | [07606e3181](angular/angular@07606e3) | feat | add `isEmpty` method to the `TransferState` class ([#46915](angular/angular#46915)) | ##### platform-server | Commit | Type | Description | | -- | -- | -- | | [2b4d7f6733](angular/angular@2b4d7f6) | feat | support document reference in render functions ([#47032](angular/angular#47032)) | ##### router | Commit | Type | Description | | -- | -- | -- | | [0abb67af59](angular/angular@0abb67a) | feat | allow guards and resolvers to be plain functions ([#46684](angular/angular#46684)) | | [75df404467](angular/angular@75df404) | feat | Create APIs for using Router without RouterModule ([#47010](angular/angular#47010)) | | [10289f1f6e](angular/angular@10289f1) | feat | expose resolved route title ([#46826](angular/angular#46826)) | | [8600732b09](angular/angular@8600732) | feat | Expose the default matcher for `Routes` used by the `Router` ([#46913](angular/angular#46913)) | | [422323cee0](angular/angular@422323c) | feat | improve typings for RouterLink boolean inputs ([#47101](angular/angular#47101)) | | [26ea97688c](angular/angular@26ea976) | feat | Make router directives standalone ([#46758](angular/angular#46758)) | | [2a43beec15](angular/angular@2a43bee) | fix | Fix route recognition behavior with some versions of rxjs ([#47098](angular/angular#47098)) | ##### service-worker | Commit | Type | Description | | -- | -- | -- | | [383090858c](angular/angular@3830908) | feat | support `sendRequest` as a `notificationclick` action ([#46912](angular/angular#46912)) | | [3f548610dd](angular/angular@3f54861) | fix | export NoNewVersionDetectedEvent ([#47044](angular/angular#47044)) | | [482b6119c2](angular/angular@482b611) | fix | update golden `index.md` ([#47044](angular/angular#47044)) | #### Special Thanks Alex Rickabaugh, Andrew Kushnir, Andrew Scott, Bob Watson, Cédric Exbrayat, Dylan Hunn, Emmanuel Roux, FatalMerlin, George Kalpakas, Ilia Mirkin, Jan Kuehle, Jeremy Elbourn, Jessica Janiuk, JiaLiPassion, Kalbarczyk, Kara Erickson, Katie Hempenius, Kristiyan Kostadinov, Merlin, Paul Gschwendtner, Pawel Kozlowski, Tristan Sprößer, Victor Porof, angular-robot\[bot], dario-piotrowicz, ivanwonder and vyom  </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, click this checkbox. --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1523 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

angular-automatic-lock-bot · 2022-09-09T16:06:36Z

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.}

atscott added state: WIP area: router labels Jul 2, 2022

ngbot bot added this to the Backlog milestone Jul 2, 2022

atscott force-pushed the guardsAsFunctions branch 3 times, most recently from b1d89ef to 8b82383 Compare July 2, 2022 01:19

atscott mentioned this pull request Jul 6, 2022

Async guards should have the option to wait for previous guards to finish #40577

Closed

atscott force-pushed the guardsAsFunctions branch 8 times, most recently from 17321b5 to b329766 Compare July 20, 2022 20:51

atscott added target: minor This PR is targeted for the next minor release action: global presubmit The PR is in need of a google3 global presubmit labels Jul 20, 2022

atscott force-pushed the guardsAsFunctions branch 4 times, most recently from f4eeb47 to d82bddb Compare July 20, 2022 23:07

alfaproject reviewed Jul 21, 2022

View reviewed changes

goldens/public-api/router/index.md Outdated Show resolved Hide resolved

atscott mentioned this pull request Jul 27, 2022

Behaviour change between Angular 13 and Angular 14 #46972

Closed

atscott force-pushed the guardsAsFunctions branch 4 times, most recently from 66cb5fd to eb64dc0 Compare August 2, 2022 19:44

atscott force-pushed the guardsAsFunctions branch from eb64dc0 to 6901145 Compare August 2, 2022 20:20

atscott changed the title ~~wip: exploration of router guards and resolvers as plain-old-JS-functions~~ feat(router): allow guards and resolvers to be plain functions Aug 2, 2022

atscott removed state: WIP action: global presubmit The PR is in need of a google3 global presubmit labels Aug 2, 2022

atscott marked this pull request as ready for review August 2, 2022 23:13

pullapprove bot requested review from AndrewKushnir, dylhunn and jessicajaniuk August 2, 2022 23:13

jessicajaniuk approved these changes Aug 3, 2022

View reviewed changes

pullapprove bot requested a review from pkozlowski-opensource August 3, 2022 16:51

pkozlowski-opensource reviewed Aug 3, 2022

View reviewed changes

packages/core/src/render3/jit/module.ts Outdated Show resolved Hide resolved

pullapprove bot requested a review from pkozlowski-opensource August 3, 2022 20:07

pkozlowski-opensource reviewed Aug 3, 2022

View reviewed changes

packages/router/test/integration.spec.ts Show resolved Hide resolved

pullapprove bot requested a review from pkozlowski-opensource August 3, 2022 20:12

kbrilla reviewed Aug 3, 2022

View reviewed changes

goldens/public-api/router/index.md Show resolved Hide resolved

pkozlowski-opensource approved these changes Aug 3, 2022

View reviewed changes

dylhunn approved these changes Aug 4, 2022

View reviewed changes

AndrewKushnir approved these changes Aug 4, 2022

View reviewed changes

atscott added 2 commits August 4, 2022 17:12

fixup! feat(router): allow guards and resolvers to be plain functions

1077dc7

fixup! feat(router): allow guards and resolvers to be plain functions

7125561

atscott force-pushed the guardsAsFunctions branch from 5f1a9e5 to 7125561 Compare August 5, 2022 01:45

atscott added the action: merge The PR is ready for merge by the caretaker label Aug 5, 2022

atscott closed this in 0abb67a Aug 5, 2022

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(router): allow guards and resolvers to be plain functions #46684

feat(router): allow guards and resolvers to be plain functions #46684
atscott wants to merge 3 commits intoangular:mainfrom
atscott:guardsAsFunctions

atscott commented Jul 2, 2022 •

edited

Loading

Uh oh!

Uh oh!

atscott commented Aug 2, 2022 •

edited

Loading

Uh oh!

jessicajaniuk left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pkozlowski-opensource left a comment

Uh oh!

dylhunn left a comment

Uh oh!

AndrewKushnir left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

atscott commented Aug 5, 2022

Uh oh!

angular-automatic-lock-bot bot commented Sep 9, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

atscott commented Jul 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

atscott commented Aug 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jessicajaniuk left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pkozlowski-opensource left a comment

Choose a reason for hiding this comment

Uh oh!

dylhunn left a comment

Choose a reason for hiding this comment

Uh oh!

AndrewKushnir left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

atscott commented Aug 5, 2022

Uh oh!

angular-automatic-lock-bot bot commented Sep 9, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

atscott commented Jul 2, 2022 •

edited

Loading

atscott commented Aug 2, 2022 •

edited

Loading

jessicajaniuk left a comment •

edited

Loading