refactor(@schematics/angular): Use MaybeAsync and GuardResult types to reduce boilerplate

This refactor uses new types in the Router to reduce boilerplate.

(cherry picked from commit d05f78b)

Author: atscott

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

@@ -1,31 +1,30 @@
 import { Injectable } from '@angular/core';
 import { <%= routerImports %> } from '@angular/router';
-import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class <%= classify(name) %>Guard implements <%= implementations %> {
   <% if (implements.includes('CanActivate')) { %>canActivate(
     route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    state: RouterStateSnapshot): MaybeAsync<GuardResult> {
     return true;
   }
   <% } %><% if (implements.includes('CanActivateChild')) { %>canActivateChild(
     childRoute: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    state: RouterStateSnapshot): MaybeAsync<GuardResult> {
     return true;
   }
   <% } %><% if (implements.includes('CanDeactivate')) { %>canDeactivate(
     component: unknown,
     currentRoute: ActivatedRouteSnapshot,
     currentState: RouterStateSnapshot,
-    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    nextState?: RouterStateSnapshot): MaybeAsync<GuardResult> {
     return true;
   }
   <% } %><% if (implements.includes('CanMatch')) { %>canMatch(
     route: Route,
-    segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    segments: UrlSegment[]): MaybeAsync<GuardResult> {
     return true;
   }<% } %>
 }

packages/schematics/angular/guard/index.ts

@@ -31,7 +31,7 @@ export default function (options: GuardOptions): Rule {
       .map((implement) => (implement === 'CanDeactivate' ? 'CanDeactivate<unknown>' : implement))
       .join(', ');
     const commonRouterNameImports = ['ActivatedRouteSnapshot', 'RouterStateSnapshot'];
-    const routerNamedImports: string[] = [...options.implements, 'UrlTree'];
+    const routerNamedImports: string[] = [...options.implements, 'MaybeAsync', 'GuardResult'];
 
     if (options.implements.includes(GuardInterface.CanMatch)) {
       routerNamedImports.push('Route', 'UrlSegment');

packages/schematics/angular/guard/index_spec.ts

@@ -143,7 +143,7 @@ describe('Guard Schematic', () => {
     const options = { ...defaultOptions, implements: implementationOptions, functional: false };
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
     const fileString = tree.readContent('/projects/bar/src/app/foo.guard.ts');
-    const expectedImports = `import { CanMatch, Route, UrlSegment, UrlTree } from '@angular/router';`;
+    const expectedImports = `import { CanMatch, GuardResult, MaybeAsync, Route, UrlSegment } from '@angular/router';`;
 
     expect(fileString).toContain(expectedImports);
   });
@@ -153,7 +153,9 @@ describe('Guard Schematic', () => {
     const options = { ...defaultOptions, implements: implementationOptions, functional: false };
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
     const fileString = tree.readContent('/projects/bar/src/app/foo.guard.ts');
-    const expectedImports = `import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';`;
+    const expectedImports =
+      `import { ActivatedRouteSnapshot, CanActivate, GuardResult, ` +
+      `MaybeAsync, RouterStateSnapshot } from '@angular/router';`;
 
     expect(fileString).toContain(expectedImports);
   });
@@ -173,9 +175,8 @@ describe('Guard Schematic', () => {
     const tree = await schematicRunner.runSchematic('guard', options, appTree);
     const fileString = tree.readContent('/projects/bar/src/app/foo.guard.ts');
     const expectedImports =
-      `import ` +
-      `{ ActivatedRouteSnapshot, CanActivate, CanActivateChild, CanMatch, Route, RouterStateSnapshot, UrlSegment, UrlTree } ` +
-      `from '@angular/router';`;
+      `import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, CanMatch, GuardResult, ` +
+      `MaybeAsync, Route, RouterStateSnapshot, UrlSegment } from '@angular/router';`;
 
     expect(fileString).toContain(expectedImports);
   });