@angular/router 12.0.1 → 12.0.5

package/bundles/router-testing.umd.js

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

package/bundles/router-upgrade.umd.js

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

package/bundles/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @license Angular v12.0.1
+ * @license Angular v12.0.5
  * (c) 2010-2021 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -421,7 +421,7 @@
     }(RouterEvent));
     /**
      * An event triggered when a navigation is canceled, directly or indirectly.
-     * This can happen when a route guard
+     * This can happen for several reasons including when a route guard
      * returns `false` or initiates a redirect by returning a `UrlTree`.
      *
      * @see `NavigationStart`
@@ -1339,12 +1339,14 @@
             .join('');
     }
     function serializeQueryParams(params) {
-        var strParams = Object.keys(params).map(function (name) {
+        var strParams = Object.keys(params)
+            .map(function (name) {
             var value = params[name];
             return Array.isArray(value) ?
                 value.map(function (v) { return encodeUriQuery(name) + "=" + encodeUriQuery(v); }).join('&') :
                 encodeUriQuery(name) + "=" + encodeUriQuery(value);
-        });
+        })
+            .filter(function (s) { return !!s; });
         return strParams.length ? "?" + strParams.join('&') : '';
     }
     var SEGMENT_RE = /^[^\/()?;=#]+/;
@@ -1723,6 +1725,10 @@
      * The following example shows how to construct a component using information from a
      * currently activated route.
      *
+     * Note: the observables in this class only emit when the current and previous values differ based
+     * on shallow equality. For example, changing deeply nested properties in resolved `data` will not
+     * cause the `ActivatedRoute.data` `Observable` to emit a new value.
+     *
      * {@example router/activated-route/module.ts region="activated-route"
      *     header="activated-route.component.ts"}
      *
@@ -3083,7 +3089,8 @@
             }));
             return urlTrees$.pipe(operators.catchError(function (e) {
                 if (e instanceof AbsoluteRedirect) {
-                    // after an absolute redirect we do not apply any more redirects!
+                    // After an absolute redirect we do not apply any more redirects!
+                    // If this implementation changes, update the documentation note in `redirectTo`.
                     _this.allowRedirects = false;
                     // we need to run matching, so we can fetch all lazy-loaded modules
                     return _this.match(e.urlTree);
@@ -4208,7 +4215,12 @@
      */
     /**
      * The [DI token](guide/glossary/#di-token) for a router configuration.
-     * @see `ROUTES`
+     *
+     * `ROUTES` is a low level API for router configuration via dependency injection.
+     *
+     * We recommend that in almost all cases to use higher level APIs such as `RouterModule.forRoot()`,
+     * `RouterModule.forChild()`, `provideRoutes`, or `Router.resetConfig()`.
+     *
      * @publicApi
      */
     var ROUTES = new core.InjectionToken('ROUTES');
@@ -4451,6 +4463,11 @@
              */
             this.lastLocationChangeInfo = null;
             this.navigationId = 0;
+            /**
+             * The id of the currently active page in the router.
+             * Updated to the transition's target id on a successful navigation.
+             */
+            this.currentPageId = 0;
             this.isNgZoneEnabled = false;
             /**
              * An event stream for routing events in this NgModule.
@@ -4492,8 +4509,16 @@
             this.routeReuseStrategy = new DefaultRouteReuseStrategy();
             /**
              * How to handle a navigation request to the current URL. One of:
+             *
              * - `'ignore'` :  The router ignores the request.
              * - `'reload'` : The router reloads the URL. Use to implement a "refresh" feature.
+             *
+             * Note that this only configures whether the Route reprocesses the URL and triggers related
+             * action and events like redirects, guards, and resolvers. By default, the router re-uses a
+             * component instance when it re-navigates to the same component type without visiting a different
+             * component first. This behavior is configured by the `RouteReuseStrategy`. In order to reload
+             * routed components on same url navigation, you need to set `onSameUrlNavigation` to `'reload'`
+             * _and_ provide a `RouteReuseStrategy` which returns `false` for `shouldReuseRoute`.
              */
             this.onSameUrlNavigation = 'ignore';
             /**
@@ -4519,6 +4544,24 @@
              * @see `RouterModule`
              */
             this.relativeLinkResolution = 'corrected';
+            /**
+             * Configures how the Router attempts to restore state when a navigation is cancelled.
+             *
+             * 'replace' - Always uses `location.replaceState` to set the browser state to the state of the
+             * router before the navigation started.
+             *
+             * 'computed' - Will always return to the same state that corresponds to the actual Angular route
+             * when the navigation gets cancelled right after triggering a `popstate` event.
+             *
+             * The default value is `replace`
+             *
+             * @internal
+             */
+            // TODO(atscott): Determine how/when/if to make this public API
+            // This shouldn’t be an option at all but may need to be in order to allow migration without a
+            // breaking change. We need to determine if it should be made into public api (or if we forgo
+            // the option and release as a breaking change bug fix in a major version).
+            this.canceledNavigationResolution = 'replace';
             var onLoadStart = function (r) { return _this.triggerEvent(new RouteConfigLoadStart(r)); };
             var onLoadEnd = function (r) { return _this.triggerEvent(new RouteConfigLoadEnd(r)); };
             this.ngModule = injector.get(core.NgModuleRef);
@@ -4533,6 +4576,7 @@
             this.routerState = createEmptyState(this.currentUrlTree, this.rootComponentType);
             this.transitions = new rxjs.BehaviorSubject({
                 id: 0,
+                targetPageId: 0,
                 currentUrlTree: this.currentUrlTree,
                 currentRawUrl: this.currentUrlTree,
                 extractedUrl: this.urlHandlingStrategy.extract(this.currentUrlTree),
@@ -4606,7 +4650,7 @@
                         operators.tap(function (t) {
                             if (_this.urlUpdateStrategy === 'eager') {
                                 if (!t.extras.skipLocationChange) {
-                                    _this.setBrowserUrl(t.urlAfterRedirects, !!t.extras.replaceUrl, t.id, t.extras.state);
+                                    _this.setBrowserUrl(t.urlAfterRedirects, t);
                                 }
                                 _this.browserUrlTree = t.urlAfterRedirects;
                             }
@@ -4666,10 +4710,7 @@
                     _this.triggerEvent(guardsEnd);
                 }), operators.filter(function (t) {
                     if (!t.guardsResult) {
-                        _this.resetUrlToCurrentUrlTree();
-                        var navCancel = new NavigationCancel(t.id, _this.serializeUrl(t.extractedUrl), '');
-                        eventsSubject.next(navCancel);
-                        t.resolve(false);
+                        _this.cancelNavigationTransition(t, '');
                         return false;
                     }
                     return true;
@@ -4686,9 +4727,7 @@
                                 next: function () { return dataResolved = true; },
                                 complete: function () {
                                     if (!dataResolved) {
-                                        var navCancel = new NavigationCancel(t.id, _this.serializeUrl(t.extractedUrl), "At least one route resolver didn't emit any value.");
-                                        eventsSubject.next(navCancel);
-                                        t.resolve(false);
+                                        _this.cancelNavigationTransition(t, "At least one route resolver didn't emit any value.");
                                     }
                                 }
                             }));
@@ -4725,7 +4764,7 @@
                     _this.routerState = t.targetRouterState;
                     if (_this.urlUpdateStrategy === 'deferred') {
                         if (!t.extras.skipLocationChange) {
-                            _this.setBrowserUrl(_this.rawUrlTree, !!t.extras.replaceUrl, t.id, t.extras.state);
+                            _this.setBrowserUrl(_this.rawUrlTree, t);
                         }
                         _this.browserUrlTree = t.urlAfterRedirects;
                     }
@@ -4752,10 +4791,7 @@
                         // 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.resetUrlToCurrentUrlTree();
-                        var navCancel = new NavigationCancel(t.id, _this.serializeUrl(t.extractedUrl), "Navigation ID " + t.id + " is not equal to the current navigation id " + _this.navigationId);
-                        eventsSubject.next(navCancel);
-                        t.resolve(false);
+                        _this.cancelNavigationTransition(t, "Navigation ID " + t.id + " is not equal to the current navigation id " + _this.navigationId);
                     }
                     // currentNavigation should always be reset to null here. If navigation was
                     // successful, lastSuccessfulTransition will have already been set. Therefore
@@ -4868,6 +4904,7 @@
                             if (state) {
                                 var stateCopy = Object.assign({}, state);
                                 delete stateCopy.navigationId;
+                                delete stateCopy.ɵrouterPageId;
                                 if (Object.keys(stateCopy).length !== 0) {
                                     extras.state = stateCopy;
                                 }
@@ -5068,7 +5105,14 @@
             }
             var urlTree = isUrlTree(url) ? url : this.parseUrl(url);
             var mergedTree = this.urlHandlingStrategy.merge(urlTree, this.rawUrlTree);
-            return this.scheduleNavigation(mergedTree, 'imperative', null, extras);
+            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);
         };
         /**
          * Navigate based on the provided array of commands and a starting point.
@@ -5151,6 +5195,7 @@
             this.navigations.subscribe(function (t) {
                 _this.navigated = true;
                 _this.lastSuccessfulId = t.id;
+                _this.currentPageId = t.targetPageId;
                 _this.events
                     .next(new NavigationEnd(t.id, _this.serializeUrl(t.extractedUrl), _this.serializeUrl(_this.currentUrlTree)));
                 _this.lastSuccessfulNavigation = _this.currentNavigation;
@@ -5201,8 +5246,24 @@
                 });
             }
             var id = ++this.navigationId;
+            var targetPageId;
+            if (this.canceledNavigationResolution === 'computed') {
+                // If the `ɵrouterPageId` exist in the state then `targetpageId` should have the value of
+                // `ɵrouterPageId`
+                if (restoredState && restoredState.ɵrouterPageId) {
+                    targetPageId = restoredState.ɵrouterPageId;
+                }
+                else {
+                    targetPageId = this.currentPageId + 1;
+                }
+            }
+            else {
+                // This is unused when `canceledNavigationResolution` is not computed.
+                targetPageId = 0;
+            }
             this.setTransition({
                 id: id,
+                targetPageId: targetPageId,
                 source: source,
                 restoredState: restoredState,
                 currentUrlTree: this.currentUrlTree,
@@ -5221,15 +5282,14 @@
                 return Promise.reject(e);
             });
         };
-        Router.prototype.setBrowserUrl = function (url, replaceUrl, id, state) {
+        Router.prototype.setBrowserUrl = function (url, t) {
             var path = this.urlSerializer.serialize(url);
-            state = state || {};
-            if (this.location.isCurrentPathEqualTo(path) || replaceUrl) {
-                // TODO(jasonaden): Remove first `navigationId` and rely on `ng` namespace.
-                this.location.replaceState(path, '', Object.assign(Object.assign({}, state), { navigationId: id }));
+            var state = Object.assign(Object.assign({}, t.extras.state), this.generateNgRouterState(t.id, t.targetPageId));
+            if (this.location.isCurrentPathEqualTo(path) || !!t.extras.replaceUrl) {
+                this.location.replaceState(path, '', state);
             }
             else {
-                this.location.go(path, '', Object.assign(Object.assign({}, state), { navigationId: id }));
+                this.location.go(path, '', state);
             }
         };
         Router.prototype.resetStateAndUrl = function (storedState, storedUrl, rawUrl) {
@@ -5239,7 +5299,43 @@
             this.resetUrlToCurrentUrlTree();
         };
         Router.prototype.resetUrlToCurrentUrlTree = function () {
-            this.location.replaceState(this.urlSerializer.serialize(this.rawUrlTree), '', { navigationId: this.lastSuccessfulId });
+            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`
+         */
+        Router.prototype.cancelNavigationTransition = function (t, reason) {
+            if (this.canceledNavigationResolution === 'computed') {
+                // 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;
+                    this.location.historyGo(targetPagePosition);
+                }
+                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.
+                }
+            }
+            else {
+                this.resetUrlToCurrentUrlTree();
+            }
+            var navCancel = new NavigationCancel(t.id, this.serializeUrl(t.extractedUrl), reason);
+            this.triggerEvent(navCancel);
+            t.resolve(false);
+        };
+        Router.prototype.generateNgRouterState = function (navigationId, routerPageId) {
+            if (this.canceledNavigationResolution === 'computed') {
+                return { navigationId: navigationId, ɵrouterPageId: routerPageId };
+            }
+            return { navigationId: navigationId };
         };
         return Router;
     }());
@@ -6545,7 +6641,7 @@
     /**
      * @publicApi
      */
-    var VERSION = new core.Version('12.0.1');
+    var VERSION = new core.Version('12.0.5');
 
     /**
      * @license