feat(router): helper functions to convert class guards to functional (#48709)

atscott · AndrewKushnir · commit 455c7285257a · 2023-02-27T11:52:47.000-08:00
This commit introduces helper functions to easily convert `Injectable`s with functions compatible with `Route` guards to the corresponding guard functions. These functions will serve to aid in migrating off of the now deprecated class-based guards, but also provide an easy avenue to still defining guards as `Injectable` classes if that is desired. PR Close #48709
diff --git a/goldens/public-api/router/index.md b/goldens/public-api/router/index.md
@@ -371,6 +371,31 @@ export type LoadChildren = LoadChildrenCallback;
 // @public
 export type LoadChildrenCallback = () => Type<any> | NgModuleFactory<any> | Routes | Observable<Type<any> | Routes | DefaultExport<Type<any>> | DefaultExport<Routes>> | Promise<NgModuleFactory<any> | Type<any> | Routes | DefaultExport<Type<any>> | DefaultExport<Routes>>;
 
+// @public
+export function mapToCanActivate(providers: Array<Type<{
+    canActivate: CanActivateFn;
+}>>): CanActivateFn[];
+
+// @public
+export function mapToCanActivateChild(providers: Array<Type<{
+    canActivateChild: CanActivateChildFn;
+}>>): CanActivateChildFn[];
+
+// @public
+export function mapToCanDeactivate<T = unknown>(providers: Array<Type<{
+    canDeactivate: CanDeactivateFn<T>;
+}>>): CanDeactivateFn<T>[];
+
+// @public
+export function mapToCanMatch(providers: Array<Type<{
+    canMatch: CanMatchFn;
+}>>): CanMatchFn[];
+
+// @public
+export function mapToResolve<T>(provider: Type<{
+    resolve: ResolveFn<T>;
+}>): ResolveFn<T>;
+
 // @public
 export interface Navigation {
     extractedUrl: UrlTree;
diff --git a/packages/examples/router/BUILD.bazel b/packages/examples/router/BUILD.bazel
@@ -10,10 +10,7 @@ ng_module(
     deps = [
         "//packages/core",
         "//packages/platform-browser",
-        "//packages/platform-browser-dynamic",
         "//packages/router",
-        "//packages/zone.js/lib",
-        "@npm//rxjs",
     ],
 )
 
diff --git a/packages/examples/router/utils/functional_guards.ts b/packages/examples/router/utils/functional_guards.ts
@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Injectable} from '@angular/core';
+import {mapToCanActivate, mapToResolve, Route} from '@angular/router';
+
+// #docregion CanActivate
+@Injectable({providedIn: 'root'})
+export class AdminGuard {
+  canActivate() {
+    return true;
+  }
+}
+
+const route: Route = {
+  path: 'admin',
+  canActivate: mapToCanActivate([AdminGuard]),
+};
+// #enddocregion
+
+// #docregion Resolve
+@Injectable({providedIn: 'root'})
+export class ResolveUser {
+  resolve() {
+    return {name: 'Bob'};
+  }
+}
+
+const userRoute: Route = {
+  path: 'user',
+  resolve: {
+    user: mapToResolve(ResolveUser),
+  },
+};
+// #enddocregion
diff --git a/packages/router/src/index.ts b/packages/router/src/index.ts
@@ -27,6 +27,7 @@ export {ActivatedRoute, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot
 export {convertToParamMap, defaultUrlMatcher, ParamMap, Params, PRIMARY_OUTLET} from './shared';
 export {UrlHandlingStrategy} from './url_handling_strategy';
 export {DefaultUrlSerializer, IsActiveMatchOptions, UrlSegment, UrlSegmentGroup, UrlSerializer, UrlTree} from './url_tree';
+export {mapToCanActivate, mapToCanActivateChild, mapToCanDeactivate, mapToCanMatch, mapToResolve} from './utils/functional_guards';
 export {VERSION} from './version';
 
 export * from './private_export';
diff --git a/packages/router/src/utils/functional_guards.ts b/packages/router/src/utils/functional_guards.ts
@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {inject, Type} from '@angular/core';
+
+import {CanActivateChildFn, CanActivateFn, CanDeactivateFn, CanMatchFn, ResolveFn} from '../models';
+
+/**
+ * Maps an array of injectable classes with canMatch functions to an array of equivalent
+ * `CanMatchFn` for use in a `Route` definition.
+ *
+ * Usage {@example router/utils/functional_guards.ts region='CanActivate'}
+ *
+ * @publicApi
+ * @see Route
+ */
+export function mapToCanMatch(providers: Array<Type<{canMatch: CanMatchFn}>>): CanMatchFn[] {
+  return providers.map(provider => (...params) => inject(provider).canMatch(...params));
+}
+
+/**
+ * Maps an array of injectable classes with canActivate functions to an array of equivalent
+ * `CanActivateFn` for use in a `Route` definition.
+ *
+ * Usage {@example router/utils/functional_guards.ts region='CanActivate'}
+ *
+ * @publicApi
+ * @see Route
+ */
+export function mapToCanActivate(providers: Array<Type<{canActivate: CanActivateFn}>>):
+    CanActivateFn[] {
+  return providers.map(provider => (...params) => inject(provider).canActivate(...params));
+}
+/**
+ * Maps an array of injectable classes with canActivateChild functions to an array of equivalent
+ * `CanActivateChildFn` for use in a `Route` definition.
+ *
+ * Usage {@example router/utils/functional_guards.ts region='CanActivate'}
+ *
+ * @publicApi
+ * @see Route
+ */
+export function mapToCanActivateChild(
+    providers: Array<Type<{canActivateChild: CanActivateChildFn}>>): CanActivateChildFn[] {
+  return providers.map(provider => (...params) => inject(provider).canActivateChild(...params));
+}
+/**
+ * Maps an array of injectable classes with canDeactivate functions to an array of equivalent
+ * `CanDeactivateFn` for use in a `Route` definition.
+ *
+ * Usage {@example router/utils/functional_guards.ts region='CanActivate'}
+ *
+ * @publicApi
+ * @see Route
+ */
+export function mapToCanDeactivate<T = unknown>(
+    providers: Array<Type<{canDeactivate: CanDeactivateFn<T>}>>): CanDeactivateFn<T>[] {
+  return providers.map(provider => (...params) => inject(provider).canDeactivate(...params));
+}
+/**
+ * Maps an injectable class with a resolve function to an equivalent `ResolveFn`
+ * for use in a `Route` definition.
+ *
+ * Usage {@example router/utils/functional_guards.ts region='Resolve'}
+ *
+ * @publicApi
+ * @see Route
+ */
+export function mapToResolve<T>(provider: Type<{resolve: ResolveFn<T>}>): ResolveFn<T> {
+  return (...params) => inject(provider).resolve(...params);
+}
