@angular/router 12.1.0 → 12.1.4

package/bundles/router-testing.umd.js

@@ -1,5 +1,5 @@
 /**
- * @license Angular v12.1.0
+ * @license Angular v12.1.4
  * (c) 2010-2021 Google LLC. https://angular.io/
  * License: MIT
  */

package/bundles/router-upgrade.umd.js

@@ -1,5 +1,5 @@
 /**
- * @license Angular v12.1.0
+ * @license Angular v12.1.4
  * (c) 2010-2021 Google LLC. https://angular.io/
  * License: MIT
  */

package/bundles/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @license Angular v12.1.0
+ * @license Angular v12.1.4
  * (c) 2010-2021 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -342,12 +342,14 @@
      * The following code shows how a class subscribes to router events.
      *
      * ```ts
+     * import {Event, RouterEvent, Router} from '@angular/router';
+     *
      * class MyService {
-     *   constructor(public router: Router, logger: Logger) {
+     *   constructor(public router: Router) {
      *     router.events.pipe(
      *        filter((e: Event): e is RouterEvent => e instanceof RouterEvent)
      *     ).subscribe((e: RouterEvent) => {
-     *       logger.log(e.id, e.url);
+     *       // Do something
      *     });
      *   }
      * }
@@ -4472,6 +4474,10 @@
             /**
              * The id of the currently active page in the router.
              * Updated to the transition's target id on a successful navigation.
+             *
+             * This is used to track what page the router last activated. When an attempted navigation fails,
+             * the router can then use this to compute how to restore the state back to the previously active
+             * page.
              */
             this.currentPageId = 0;
             this.isNgZoneEnabled = false;
@@ -4604,6 +4610,19 @@
             this.navigations = this.setupNavigations(this.transitions);
             this.processNavigations();
         }
+        Object.defineProperty(Router.prototype, "browserPageId", {
+            /**
+             * The ɵrouterPageId of whatever page is currently active in the browser history. This is
+             * important for computing the target page id for new navigations because we need to ensure each
+             * page id in the browser history is 1 more than the previous entry.
+             */
+            get: function () {
+                var _a;
+                return (_a = this.location.getState()) === null || _a === void 0 ? void 0 : _a.ɵrouterPageId;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Router.prototype.setupNavigations = function (transitions) {
             var _this = this;
             var eventsSubject = this.events;
@@ -4693,7 +4712,7 @@
                 }), 
                 // Before Preactivation
                 switchTap(function (t) {
-                    var targetSnapshot = t.targetSnapshot, navigationId = t.id, appliedUrlTree = t.extractedUrl, rawUrlTree = t.rawUrl, _b = t.extras, skipLocationChange = _b.skipLocationChange, replaceUrl = _b.replaceUrl;
+                    var targetSnapshot = t.targetSnapshot, navigationId = t.id, appliedUrlTree = t.extractedUrl, rawUrlTree = t.rawUrl, _c = t.extras, skipLocationChange = _c.skipLocationChange, replaceUrl = _c.replaceUrl;
                     return _this.hooks.beforePreactivation(targetSnapshot, {
                         navigationId: navigationId,
                         appliedUrlTree: appliedUrlTree,
@@ -4716,6 +4735,7 @@
                     _this.triggerEvent(guardsEnd);
                 }), operators.filter(function (t) {
                     if (!t.guardsResult) {
+                        _this.restoreHistory(t);
                         _this.cancelNavigationTransition(t, '');
                         return false;
                     }
@@ -4733,6 +4753,7 @@
                                 next: function () { return dataResolved = true; },
                                 complete: function () {
                                     if (!dataResolved) {
+                                        _this.restoreHistory(t);
                                         _this.cancelNavigationTransition(t, "At least one route resolver didn't emit any value.");
                                     }
                                 }
@@ -4746,7 +4767,7 @@
                 }), 
                 // --- AFTER PREACTIVATION ---
                 switchTap(function (t) {
-                    var targetSnapshot = t.targetSnapshot, navigationId = t.id, appliedUrlTree = t.extractedUrl, rawUrlTree = t.rawUrl, _b = t.extras, skipLocationChange = _b.skipLocationChange, replaceUrl = _b.replaceUrl;
+                    var targetSnapshot = t.targetSnapshot, navigationId = t.id, appliedUrlTree = t.extractedUrl, rawUrlTree = t.rawUrl, _c = t.extras, skipLocationChange = _c.skipLocationChange, replaceUrl = _c.replaceUrl;
                     return _this.hooks.afterPreactivation(targetSnapshot, {
                         navigationId: navigationId,
                         appliedUrlTree: appliedUrlTree,
@@ -4790,20 +4811,46 @@
                      * event is fired when a navigation gets cancelled but not caught by other
                      * means. */
                     if (!completed && !errored) {
-                        // Must reset to current URL tree here to ensure history.state is set. On a
-                        // fresh page load, if a new navigation comes in before a successful
-                        // navigation completes, there will be nothing in
-                        // history.state.navigationId. This can cause sync problems with AngularJS
-                        // sync code which looks for a value here in order to determine whether or
-                        // not to handle a given popstate event or to leave it to the Angular
-                        // router.
-                        _this.cancelNavigationTransition(t, "Navigation ID " + t.id + " is not equal to the current navigation id " + _this.navigationId);
+                        var cancelationReason = "Navigation ID " + t.id + " is not equal to the current navigation id " + _this.navigationId;
+                        if (_this.canceledNavigationResolution === 'replace') {
+                            // Must reset to current URL tree here to ensure history.state is set. On
+                            // a fresh page load, if a new navigation comes in before a successful
+                            // navigation completes, there will be nothing in
+                            // history.state.navigationId. This can cause sync problems with
+                            // AngularJS sync code which looks for a value here in order to determine
+                            // whether or not to handle a given popstate event or to leave it to the
+                            // Angular router.
+                            _this.restoreHistory(t);
+                            _this.cancelNavigationTransition(t, cancelationReason);
+                        }
+                        else {
+                            // We cannot trigger a `location.historyGo` if the
+                            // cancellation was due to a new navigation before the previous could
+                            // complete. This is because `location.historyGo` triggers a `popstate`
+                            // which would also trigger another navigation. Instead, treat this as a
+                            // redirect and do not reset the state.
+                            _this.cancelNavigationTransition(t, cancelationReason);
+                            // TODO(atscott): The same problem happens here with a fresh page load
+                            // and a new navigation before that completes where we won't set a page
+                            // id.
+                        }
                     }
                     // currentNavigation should always be reset to null here. If navigation was
                     // successful, lastSuccessfulTransition will have already been set. Therefore
                     // we can safely set currentNavigation to null here.
                     _this.currentNavigation = null;
                 }), operators.catchError(function (e) {
+                    // TODO(atscott): The NavigationTransition `t` used here does not accurately
+                    // reflect the current state of the whole transition because some operations
+                    // return a new object rather than modifying the one in the outermost
+                    // `switchMap`.
+                    //  The fix can likely be to:
+                    //  1. Rename the outer `t` variable so it's not shadowed all the time and
+                    //  confusing
+                    //  2. Keep reassigning to the outer variable after each stage to ensure it
+                    //  gets updated. Or change the implementations to not return a copy.
+                    // Not changed yet because it affects existing code and would need to be
+                    // tested more thoroughly.
                     errored = true;
                     /* This error type is issued during Redirect, and is handled as a
                      * cancellation rather than an error. */
@@ -4816,7 +4863,7 @@
                             // This is only applicable with initial navigation, so setting
                             // `navigated` only when not redirecting resolves this scenario.
                             _this.navigated = true;
-                            _this.resetStateAndUrl(t.currentRouterState, t.currentUrlTree, t.rawUrl);
+                            _this.restoreHistory(t, true);
                         }
                         var navCancel = new NavigationCancel(t.id, _this.serializeUrl(t.extractedUrl), e.message);
                         eventsSubject.next(navCancel);
@@ -4843,7 +4890,7 @@
                          * the pre-error state. */
                     }
                     else {
-                        _this.resetStateAndUrl(t.currentRouterState, t.currentUrlTree, t.rawUrl);
+                        _this.restoreHistory(t, true);
                         var navError = new NavigationError(t.id, _this.serializeUrl(t.extractedUrl), e);
                         eventsSubject.next(navError);
                         try {
@@ -4901,9 +4948,9 @@
             if (!this.locationSubscription) {
                 this.locationSubscription = this.location.subscribe(function (event) {
                     var currentChange = _this.extractLocationChangeInfoFromEvent(event);
+                    // The `setTimeout` was added in #12160 and is likely to support Angular/AngularJS
+                    // hybrid apps.
                     if (_this.shouldScheduleNavigation(_this.lastLocationChangeInfo, currentChange)) {
-                        // The `setTimeout` was added in #12160 and is likely to support Angular/AngularJS
-                        // hybrid apps.
                         setTimeout(function () {
                             var source = currentChange.source, state = currentChange.state, urlTree = currentChange.urlTree;
                             var extras = { replaceUrl: true };
@@ -5111,14 +5158,7 @@
             }
             var urlTree = isUrlTree(url) ? url : this.parseUrl(url);
             var mergedTree = this.urlHandlingStrategy.merge(urlTree, this.rawUrlTree);
-            var restoredState = null;
-            if (this.canceledNavigationResolution === 'computed') {
-                var isInitialPage = this.currentPageId === 0;
-                if (isInitialPage || extras.skipLocationChange || extras.replaceUrl) {
-                    restoredState = this.location.getState();
-                }
-            }
-            return this.scheduleNavigation(mergedTree, 'imperative', restoredState, extras);
+            return this.scheduleNavigation(mergedTree, 'imperative', null, extras);
         };
         /**
          * Navigate based on the provided array of commands and a starting point.
@@ -5211,6 +5251,7 @@
             });
         };
         Router.prototype.scheduleNavigation = function (rawUrl, source, restoredState, extras, priorPromise) {
+            var _a, _b;
             if (this.disposed) {
                 return Promise.resolve(false);
             }
@@ -5254,13 +5295,25 @@
             var id = ++this.navigationId;
             var targetPageId;
             if (this.canceledNavigationResolution === 'computed') {
+                var isInitialPage = this.currentPageId === 0;
+                if (isInitialPage) {
+                    restoredState = this.location.getState();
+                }
                 // If the `ɵrouterPageId` exist in the state then `targetpageId` should have the value of
-                // `ɵrouterPageId`
+                // `ɵrouterPageId`. This is the case for something like a page refresh where we assign the
+                // target id to the previously set value for that page.
                 if (restoredState && restoredState.ɵrouterPageId) {
                     targetPageId = restoredState.ɵrouterPageId;
                 }
                 else {
-                    targetPageId = this.currentPageId + 1;
+                    // If we're replacing the URL or doing a silent navigation, we do not want to increment the
+                    // page id because we aren't pushing a new entry to history.
+                    if (extras.replaceUrl || extras.skipLocationChange) {
+                        targetPageId = (_a = this.browserPageId) !== null && _a !== void 0 ? _a : 0;
+                    }
+                    else {
+                        targetPageId = ((_b = this.browserPageId) !== null && _b !== void 0 ? _b : 0) + 1;
+                    }
                 }
             }
             else {
@@ -5298,41 +5351,60 @@
                 this.location.go(path, '', state);
             }
         };
-        Router.prototype.resetStateAndUrl = function (storedState, storedUrl, rawUrl) {
-            this.routerState = storedState;
-            this.currentUrlTree = storedUrl;
-            this.rawUrlTree = this.urlHandlingStrategy.merge(this.currentUrlTree, rawUrl);
-            this.resetUrlToCurrentUrlTree();
-        };
-        Router.prototype.resetUrlToCurrentUrlTree = function () {
-            this.location.replaceState(this.urlSerializer.serialize(this.rawUrlTree), '', this.generateNgRouterState(this.lastSuccessfulId, this.currentPageId));
-        };
         /**
-         * Responsible for handling the cancellation of a navigation:
-         * - performs the necessary rollback action to restore the browser URL to the
-         * state before the transition
-         * - triggers the `NavigationCancel` event
-         * - resolves the transition promise with `false`
+         * Performs the necessary rollback action to restore the browser URL to the
+         * state before the transition.
          */
-        Router.prototype.cancelNavigationTransition = function (t, reason) {
+        Router.prototype.restoreHistory = function (t, restoringFromCaughtError) {
+            if (restoringFromCaughtError === void 0) { restoringFromCaughtError = false; }
+            var _a, _b;
             if (this.canceledNavigationResolution === 'computed') {
+                var targetPagePosition = this.currentPageId - t.targetPageId;
                 // The navigator change the location before triggered the browser event,
                 // so we need to go back to the current url if the navigation is canceled.
                 // Also, when navigation gets cancelled while using url update strategy eager, then we need to
                 // go back. Because, when `urlUpdateSrategy` is `eager`; `setBrowserUrl` method is called
                 // before any verification.
-                if (t.source === 'popstate' || this.urlUpdateStrategy === 'eager') {
-                    var targetPagePosition = this.currentPageId - t.targetPageId;
+                var browserUrlUpdateOccurred = (t.source === 'popstate' || this.urlUpdateStrategy === 'eager' ||
+                    this.currentUrlTree === ((_a = this.currentNavigation) === null || _a === void 0 ? void 0 : _a.finalUrl));
+                if (browserUrlUpdateOccurred && targetPagePosition !== 0) {
                     this.location.historyGo(targetPagePosition);
                 }
+                else if (this.currentUrlTree === ((_b = this.currentNavigation) === null || _b === void 0 ? void 0 : _b.finalUrl) && targetPagePosition === 0) {
+                    // We got to the activation stage (where currentUrlTree is set to the navigation's
+                    // finalUrl), but we weren't moving anywhere in history (skipLocationChange or replaceUrl).
+                    // We still need to reset the router state back to what it was when the navigation started.
+                    this.resetState(t);
+                    // TODO(atscott): resetting the `browserUrlTree` should really be done in `resetState`.
+                    // Investigate if this can be done by running TGP.
+                    this.browserUrlTree = t.currentUrlTree;
+                    this.resetUrlToCurrentUrlTree();
+                }
                 else {
-                    // If update is not 'eager' and the transition navigation source isn't 'popstate', then the
-                    // navigation was cancelled before any browser url change so nothing needs to be restored.
+                    // The browser URL and router state was not updated before the navigation cancelled so
+                    // there's no restoration needed.
                 }
             }
-            else {
+            else if (this.canceledNavigationResolution === 'replace') {
+                // TODO(atscott): It seems like we should _always_ reset the state here. It would be a no-op
+                // for `deferred` navigations that haven't change the internal state yet because guards
+                // reject. For 'eager' navigations, it seems like we also really should reset the state
+                // because the navigation was cancelled. Investigate if this can be done by running TGP.
+                if (restoringFromCaughtError) {
+                    this.resetState(t);
+                }
                 this.resetUrlToCurrentUrlTree();
             }
+        };
+        Router.prototype.resetState = function (t) {
+            this.routerState = t.currentRouterState;
+            this.currentUrlTree = t.currentUrlTree;
+            this.rawUrlTree = this.urlHandlingStrategy.merge(this.currentUrlTree, t.rawUrl);
+        };
+        Router.prototype.resetUrlToCurrentUrlTree = function () {
+            this.location.replaceState(this.urlSerializer.serialize(this.rawUrlTree), '', this.generateNgRouterState(this.lastSuccessfulId, this.currentPageId));
+        };
+        Router.prototype.cancelNavigationTransition = function (t, reason) {
             var navCancel = new NavigationCancel(t.id, this.serializeUrl(t.extractedUrl), reason);
             this.triggerEvent(navCancel);
             t.resolve(false);
@@ -6655,7 +6727,7 @@
     /**
      * @publicApi
      */
-    var VERSION = new core.Version('12.1.0');
+    var VERSION = new core.Version('12.1.4');
 
     /**
      * @license