fix(@schematics/angular): add CanDeactivate guard

This generates a generic `CanDeactivate<unknown>` guard.

Fixes #15668

(cherry picked from commit 2fc3fab)

Author: cexbrayat

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

@@ -16,6 +16,13 @@ export class <%= classify(name) %>Guard implements <%= implementations %> {
     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     return true;
   }
+  <% } %><% if (implements.includes('CanDeactivate')) { %>canDeactivate(
+    component: unknown,
+    currentRoute: ActivatedRouteSnapshot,
+    currentState: RouterStateSnapshot,
+    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    return true;
+  }
   <% } %><% if (implements.includes('CanLoad')) { %>canLoad(
     route: Route,
     segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {

packages/schematics/angular/guard/index.ts

@@ -35,8 +35,10 @@ export default function (options: GuardOptions): Rule {
       throw new SchematicsException('Option "implements" is required.');
     }
 
-    const implementations = options.implements.join(', ');
-    let implementationImports = `${implementations}, `;
+    const implementations = options.implements
+      .map(implement => implement === 'CanDeactivate' ? 'CanDeactivate<unknown>' : implement)
+      .join(', ');
+    let implementationImports = `${options.implements.join(', ')}, `;
     // As long as we aren't in IE... ;)
     if (options.implements.includes(GuardInterface.CanLoad)) {
       implementationImports = `${implementationImports}Route, UrlSegment, `;

packages/schematics/angular/guard/schema.json

@@ -59,6 +59,7 @@
         "enum": [
           "CanActivate",
           "CanActivateChild",
+          "CanDeactivate",
           "CanLoad"
         ],
         "type": "string"

tests/legacy-cli/e2e/tests/generate/guard/guard-multiple-implements.ts

@@ -0,0 +1,16 @@
+import {join} from 'path';
+import {ng} from '../../../utils/process';
+import {expectFileToExist,expectFileToMatch} from '../../../utils/fs';
+
+
+export default async function() {
+  // Does not create a sub directory.
+  const guardDir = join('src', 'app');
+
+  await ng('generate', 'guard', 'load', '--implements=CanLoad', '--implements=CanDeactivate');
+  await expectFileToExist(guardDir);
+  await expectFileToExist(join(guardDir, 'load.guard.ts'));
+  await expectFileToMatch(join(guardDir, 'load.guard.ts'), /implements CanLoad, CanDeactivate<unknown>/);
+  await expectFileToExist(join(guardDir, 'load.guard.spec.ts'));
+  await ng('test', '--watch=false');
+}