@angular/router 12.1.0-next.5 → 12.1.2

package/fesm2015/router.js

@@ -1,5 +1,5 @@
 /**
- * @license Angular v12.1.0-next.5
+ * @license Angular v12.1.2
  * (c) 2010-2021 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -3876,6 +3876,15 @@ class Router {
          */
         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 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;
         /**
          * An event stream for routing events in this NgModule.
@@ -3952,6 +3961,24 @@ class Router {
          * @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';
         const onLoadStart = (r) => this.triggerEvent(new RouteConfigLoadStart(r));
         const onLoadEnd = (r) => this.triggerEvent(new RouteConfigLoadEnd(r));
         this.ngModule = injector.get(NgModuleRef);
@@ -3966,6 +3993,7 @@ class Router {
         this.routerState = createEmptyState(this.currentUrlTree, this.rootComponentType);
         this.transitions = new BehaviorSubject({
             id: 0,
+            targetPageId: 0,
             currentUrlTree: this.currentUrlTree,
             currentRawUrl: this.currentUrlTree,
             extractedUrl: this.urlHandlingStrategy.extract(this.currentUrlTree),
@@ -3987,6 +4015,15 @@ class Router {
         this.navigations = this.setupNavigations(this.transitions);
         this.processNavigations();
     }
+    /**
+     * 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 browserPageId() {
+        var _a;
+        return (_a = this.location.getState()) === null || _a === void 0 ? void 0 : _a.ɵrouterPageId;
+    }
     setupNavigations(transitions) {
         const eventsSubject = this.events;
         return transitions.pipe(filter(t => t.id !== 0), 
@@ -4038,7 +4075,7 @@ class Router {
                     tap(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;
                         }
@@ -4098,10 +4135,7 @@ class Router {
                 this.triggerEvent(guardsEnd);
             }), filter(t => {
                 if (!t.guardsResult) {
-                    this.resetUrlToCurrentUrlTree();
-                    const navCancel = new NavigationCancel(t.id, this.serializeUrl(t.extractedUrl), '');
-                    eventsSubject.next(navCancel);
-                    t.resolve(false);
+                    this.cancelNavigationTransitionRestoreHistory(t, '');
                     return false;
                 }
                 return true;
@@ -4118,9 +4152,7 @@ class Router {
                             next: () => dataResolved = true,
                             complete: () => {
                                 if (!dataResolved) {
-                                    const 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.cancelNavigationTransitionRestoreHistory(t, `At least one route resolver didn't emit any value.`);
                                 }
                             }
                         }));
@@ -4157,7 +4189,7 @@ class Router {
                 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;
                 }
@@ -4177,17 +4209,28 @@ class Router {
                  * 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.resetUrlToCurrentUrlTree();
-                    const 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);
+                    const 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.cancelNavigationTransitionRestoreHistory(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
@@ -4290,15 +4333,16 @@ class Router {
         if (!this.locationSubscription) {
             this.locationSubscription = this.location.subscribe(event => {
                 const 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(() => {
                         const { source, state, urlTree } = currentChange;
                         const extras = { replaceUrl: true };
                         if (state) {
                             const stateCopy = Object.assign({}, state);
                             delete stateCopy.navigationId;
+                            delete stateCopy.ɵrouterPageId;
                             if (Object.keys(stateCopy).length !== 0) {
                                 extras.state = stateCopy;
                             }
@@ -4574,6 +4618,7 @@ class Router {
         this.navigations.subscribe(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;
@@ -4583,6 +4628,7 @@ class Router {
         });
     }
     scheduleNavigation(rawUrl, source, restoredState, extras, priorPromise) {
+        var _a, _b;
         if (this.disposed) {
             return Promise.resolve(false);
         }
@@ -4624,8 +4670,36 @@ class Router {
             });
         }
         const id = ++this.navigationId;
+        let targetPageId;
+        if (this.canceledNavigationResolution === 'computed') {
+            const 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`. 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 {
+                // 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 {
+            // This is unused when `canceledNavigationResolution` is not computed.
+            targetPageId = 0;
+        }
         this.setTransition({
             id,
+            targetPageId,
             source,
             restoredState,
             currentUrlTree: this.currentUrlTree,
@@ -4644,15 +4718,14 @@ class Router {
             return Promise.reject(e);
         });
     }
-    setBrowserUrl(url, replaceUrl, id, state) {
+    setBrowserUrl(url, t) {
         const 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 }));
+        const 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);
         }
     }
     resetStateAndUrl(storedState, storedUrl, rawUrl) {
@@ -4662,7 +4735,46 @@ class Router {
         this.resetUrlToCurrentUrlTree();
     }
     resetUrlToCurrentUrlTree() {
-        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`
+     */
+    cancelNavigationTransitionRestoreHistory(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') {
+                const 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();
+        }
+        this.cancelNavigationTransition(t, reason);
+    }
+    cancelNavigationTransition(t, reason) {
+        const navCancel = new NavigationCancel(t.id, this.serializeUrl(t.extractedUrl), reason);
+        this.triggerEvent(navCancel);
+        t.resolve(false);
+    }
+    generateNgRouterState(navigationId, routerPageId) {
+        if (this.canceledNavigationResolution === 'computed') {
+            return { navigationId, ɵrouterPageId: routerPageId };
+        }
+        return { navigationId };
     }
 }
 Router.decorators = [
@@ -5804,11 +5916,16 @@ class RouterInitializer {
     constructor(injector) {
         this.injector = injector;
         this.initNavigation = false;
+        this.destroyed = false;
         this.resultOfPreactivationDone = new Subject();
     }
     appInitializer() {
         const p = this.injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
         return p.then(() => {
+            // If the injector was destroyed, the DI lookups below will fail.
+            if (this.destroyed) {
+                return Promise.resolve(true);
+            }
             let resolve = null;
             const res = new Promise(r => resolve = r);
             const router = this.injector.get(Router);
@@ -5859,6 +5976,9 @@ class RouterInitializer {
         this.resultOfPreactivationDone.next(null);
         this.resultOfPreactivationDone.complete();
     }
+    ngOnDestroy() {
+        this.destroyed = true;
+    }
 }
 RouterInitializer.decorators = [
     { type: Injectable }
@@ -5903,7 +6023,7 @@ function provideRouterInitializer() {
 /**
  * @publicApi
  */
-const VERSION = new Version('12.1.0-next.5');
+const VERSION = new Version('12.1.2');
 
 /**
  * @license