fix(router): allow to return UrlTree from CanMatchFn (#46455)

dimakuba · AndrewKushnir · commit abe3759e2417 · 2022-06-22T13:25:23.000-07:00
Currently it's not possible to return plain `UrlTree` from `CanMatchFn`, only wrapped `UrlTree` into Observable or Promise is allowed. These changes allow to return `UrlTree` from `CanMatchFn`. PR Close #46455
diff --git a/goldens/public-api/router/index.md b/goldens/public-api/router/index.md
@@ -142,7 +142,7 @@ export interface CanMatch {
 }
 
 // @public
-export type CanMatchFn = (route: Route, segments: UrlSegment[]) => Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean;
+export type CanMatchFn = (route: Route, segments: UrlSegment[]) => Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree;
 
 // @public
 export class ChildActivationEnd {
diff --git a/packages/router/src/models.ts b/packages/router/src/models.ts
@@ -915,7 +915,7 @@ export interface CanMatch {
  * @see `Route`
  */
 export type CanMatchFn = (route: Route, segments: UrlSegment[]) =>
-    Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean;
+    Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree;
 
 /**
  * @description
diff --git a/packages/router/test/integration.spec.ts b/packages/router/test/integration.spec.ts
@@ -16,7 +16,7 @@ import {ActivatedRoute, ActivatedRouteSnapshot, ActivationEnd, ActivationStart,
 import {EMPTY, Observable, Observer, of, Subscription} from 'rxjs';
 import {delay, filter, first, map, mapTo, tap} from 'rxjs/operators';
 
-import {CanMatch} from '../src/models';
+import {CanMatch, CanMatchFn} from '../src/models';
 import {forEach} from '../src/utils/collection';
 import {getLoadedRoutes} from '../src/utils/config';
 import {RouterTestingModule} from '../testing';
@@ -4788,6 +4788,28 @@ describe('Integration', () => {
            const fixture = createRoot(router, RootCmp);
 
 
+           router.navigateByUrl('/a');
+           advance(fixture);
+           expect(fixture.nativeElement.innerHTML).toContain('team');
+         }));
+
+      it('can return UrlTree from CanMatchFn guard', fakeAsync(() => {
+           const canMatchTeamSection = new InjectionToken('CanMatchTeamSection');
+           const canMatchFactory: (router: Router) => CanMatchFn = (router: Router) => () =>
+               router.createUrlTree(['/team/1']);
+
+           TestBed.overrideProvider(
+               canMatchTeamSection, {useFactory: canMatchFactory, deps: [Router]});
+
+           const router = TestBed.inject(Router);
+
+           router.resetConfig([
+             {path: 'a', canMatch: [canMatchTeamSection], component: SimpleCmp},
+             {path: 'team/:id', component: TeamCmp},
+           ]);
+           const fixture = createRoot(router, RootCmp);
+
+
            router.navigateByUrl('/a');
            advance(fixture);
            expect(fixture.nativeElement.innerHTML).toContain('team');

Original file line number	Diff line number	Diff line change
`@@ -142,7 +142,7 @@ export interface CanMatch {`
`142`	`142`	`}`
`143`	`143`
`144`	`144`	`// @public`
`145`		`-export type CanMatchFn = (route: Route, segments: UrlSegment[]) => Observable<boolean \| UrlTree> \| Promise<boolean \| UrlTree> \| boolean;`
	`145`	`+export type CanMatchFn = (route: Route, segments: UrlSegment[]) => Observable<boolean \| UrlTree> \| Promise<boolean \| UrlTree> \| boolean \| UrlTree;`
`146`	`146`
`147`	`147`	`// @public`
`148`	`148`	`export class ChildActivationEnd {`