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

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

packages/core/test/bundling/router/bundle.golden_symbols.json

@@ -890,6 +890,9 @@
   {
     "name": "createTemplateRef"
   },
+  {
+    "name": "createUrlTree"
+  },
   {
     "name": "deactivateRouteAndItsChildren"
   },

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;
   }
 }
 

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);

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 */