fix(@schematics/angular): guard schematics should include all guards (CanMatch)

The `CanMatch` guard was added in v14.1 but not added
to the list of possible interfaces to implement.
This commit adds `CanMatch` to the list of possible
interfaces to implement. It has the same type imports
as the CanLoad interface.

(cherry picked from commit f837f6d)

Author: atscott

packages/schematics/angular/guard/files/__name@dasherize__.guard.ts.template

@@ -23,7 +23,11 @@ export class <%= classify(name) %>Guard implements <%= implementations %> {
     nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     return true;
   }
-  <% } %><% if (implements.includes('CanLoad')) { %>canLoad(
+  <% } %><% if (implements.includes('CanMatch')) { %>canMatch(
+    route: Route,
+    segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    return true;
+  }<% } %><% if (implements.includes('CanLoad')) { %>canLoad(
     route: Route,
     segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     return true;

packages/schematics/angular/guard/index.ts

@@ -21,7 +21,10 @@ export default function (options: GuardOptions): Rule {
   const commonRouterNameImports = ['ActivatedRouteSnapshot', 'RouterStateSnapshot'];
   const routerNamedImports: string[] = [...options.implements, 'UrlTree'];
 
-  if (options.implements.includes(GuardInterface.CanLoad)) {
+  if (
+    options.implements.includes(GuardInterface.CanLoad) ||
+    options.implements.includes(GuardInterface.CanMatch)
+  ) {
     routerNamedImports.push('Route', 'UrlSegment');
 
     if (options.implements.length > 1) {

packages/schematics/angular/guard/index_spec.ts

@@ -126,6 +126,16 @@ describe('Guard Schematic', () => {
     expect(fileString).toContain(expectedImports);
   });
 
+  it('should add correct imports based on CanMatch implementation', async () => {
+    const implementationOptions = ['CanMatch'];
+    const options = { ...defaultOptions, implements: implementationOptions };
+    const tree = await schematicRunner.runSchematicAsync('guard', options, appTree).toPromise();
+    const fileString = tree.readContent('/projects/bar/src/app/foo.guard.ts');
+    const expectedImports = `import { CanMatch, Route, UrlSegment, UrlTree } from '@angular/router';`;
+
+    expect(fileString).toContain(expectedImports);
+  });
+
   it('should add correct imports based on CanActivate implementation', async () => {
     const implementationOptions = ['CanActivate'];
     const options = { ...defaultOptions, implements: implementationOptions };

packages/schematics/angular/guard/schema.json

@@ -47,7 +47,7 @@
       "uniqueItems": true,
       "minItems": 1,
       "items": {
-        "enum": ["CanActivate", "CanActivateChild", "CanDeactivate", "CanLoad"],
+        "enum": ["CanActivate", "CanActivateChild", "CanDeactivate", "CanLoad", "CanMatch"],
         "type": "string"
       },
       "default": ["CanActivate"],