refactor(router): Warn if a navigation will change in the upcoming v16 release (#48688)

atscott · atscott · commit 5128ba036ae4 · 2023-02-07T12:25:59.000-08:00
v16 will have a breaking change to the way `UrlTree`s are constructed. This change is actually a bug fix that makes `UrlTree` creation correct in more scenarios (see #48508). However, this can affect applications that are relying on the current incorrect behavior. This commit adds a dev mode warning when the target of a navigation will change once #48508 is submitted. PR Close #48688
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -890,6 +890,9 @@
   {
     "name": "createTemplateRef"
   },
+  {
+    "name": "createUrlTree"
+  },
   {
     "name": "deactivateRouteAndItsChildren"
   },
diff --git a/packages/router/src/create_url_tree_strategy.ts b/packages/router/src/create_url_tree_strategy.ts
@@ -21,7 +21,20 @@ export class LegacyCreateUrlTree implements CreateUrlTreeStrategy {
       relativeTo: ActivatedRoute|null|undefined, currentState: RouterState, currentUrlTree: UrlTree,
       commands: any[], queryParams: Params|null, fragment: string|null): UrlTree {
     const a = relativeTo || currentState.root;
-    return createUrlTree(a, currentUrlTree, commands, queryParams, fragment);
+    const tree = createUrlTree(a, currentUrlTree, commands, queryParams, fragment);
+    if (NG_DEV_MODE) {
+      const treeFromSnapshotStrategy = new CreateUrlTreeUsingSnapshot().createUrlTree(
+          relativeTo, currentState, currentUrlTree, commands, queryParams, fragment);
+      if (treeFromSnapshotStrategy.toString() !== tree.toString()) {
+        let warningString = `The navigation to ${tree.toString()} will instead go to ${
+            treeFromSnapshotStrategy.toString()} in an upcoming version of Angular.`;
+        if (!!relativeTo) {
+          warningString += ' `relativeTo` might need to be removed from the `UrlCreationOptions`.';
+        }
+        tree._warnIfUsedForNavigation = warningString;
+      }
+    }
+    return tree;
   }
 }
 
diff --git a/packages/router/src/router.ts b/packages/router/src/router.ts
@@ -555,10 +555,14 @@ export class Router {
   navigateByUrl(url: string|UrlTree, extras: NavigationBehaviorOptions = {
     skipLocationChange: false
   }): Promise<boolean> {
-    if (typeof ngDevMode === 'undefined' ||
-        ngDevMode && this.isNgZoneEnabled && !NgZone.isInAngularZone()) {
-      this.console.warn(
-          `Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?`);
+    if (NG_DEV_MODE) {
+      if (this.isNgZoneEnabled && !NgZone.isInAngularZone()) {
+        this.console.warn(
+            `Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?`);
+      }
+      if (url instanceof UrlTree && url._warnIfUsedForNavigation) {
+        this.console.warn(url._warnIfUsedForNavigation);
+      }
     }
 
     const urlTree = isUrlTree(url) ? url : this.parseUrl(url);
diff --git a/packages/router/src/url_tree.ts b/packages/router/src/url_tree.ts
@@ -190,6 +190,8 @@ function matrixParamsMatch(
 export class UrlTree {
   /** @internal */
   _queryParamMap?: ParamMap;
+  /** @internal */
+  _warnIfUsedForNavigation?: string;
 
   constructor(
       /** The root segment group of the URL tree */

Original file line number	Diff line number	Diff line change
`@@ -890,6 +890,9 @@`
`890`	`890`	`{`
`891`	`891`	`"name": "createTemplateRef"`
`892`	`892`	`},`
	`893`	`+ {`
	`894`	`+ "name": "createUrlTree"`
	`895`	`+ },`
`893`	`896`	`{`
`894`	`897`	`"name": "deactivateRouteAndItsChildren"`
`895`	`898`	`},`