@coolon/angular-ui-powerups 0.0.101 → 0.0.102

package/fesm5/coolon-angular-ui-powerups.js

@@ -1,14 +1,13 @@
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { Directive, ElementRef, Inject, Input, HostListener, NgZone, NgModule, EventEmitter, Output, Component, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Injectable, ɵɵdefineInjectable, ɵɵinject, Optional, SkipSelf, HostBinding, INJECTOR } from '@angular/core';
+import { Directive, ElementRef, Inject, Input, HostListener, NgZone, NgModule, EventEmitter, Output, Component, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Injectable, ɵɵdefineInjectable, ɵɵinject, Optional, SkipSelf, HostBinding } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatInputModule, MatFormFieldModule, MatSelectModule, MatButtonModule, MatDialogModule, MatTabsModule as MatTabsModule$1, MatProgressSpinnerModule, MatDialog } from '@angular/material';
 import { MatTabsModule } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __extends, __decorate, __metadata, __awaiter, __generator, __assign, __spread } from 'tslib';
-import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, DelegatingListModel, Deferred, MutableStream, MutableValueModel, MutableListModel, Binding, Trace, Guard, StoreInValueModel, Command, OptionsHelper, ValueHolder } from '@coolon/pectin';
+import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, Trace, DelegatingListModel, Deferred, MutableStream, MutableValueModel, MutableListModel, Binding, Guard, StoreInValueModel, Command, OptionsHelper, ValueHolder } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
-import { RouterModule, UrlSegment, UrlSegmentGroup, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, Router, UrlSerializer, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import ___default, { last, isNil, isEqual } from 'lodash';
+import { RouterModule, NavigationStart, NavigationCancel, UrlSegment, NavigationEnd, NavigationError, Router, UrlSerializer } from '@angular/router';
 import { assert as assert$1, Opts, Klass } from '@coolon/typescript-utilities';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
@@ -16,6 +15,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
+import ___default, { isNil, isEqual } from 'lodash';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
 import ResizeObserver from 'resize-observer-polyfill';
 import { MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, MatDialog as MatDialog$1 } from '@angular/material/dialog';
@@ -1100,10 +1100,7 @@ if (false) {
 /**
  * @abstract
  */
-var  /**
- * @abstract
- */
-InteractionContext = /** @class */ (function (_super) {
+var InteractionContext = /** @class */ (function (_super) {
     __extends(InteractionContext, _super);
     function InteractionContext() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -1134,17 +1131,101 @@ InteractionContext = /** @class */ (function (_super) {
         assert.isFalsey(this.isActive());
         _super.prototype.dispose.call(this);
     };
+    /**
+     * Cancels the current activity and returns true the context is no longer active, false if
+     * there is still another activity running.
+     */
+    /**
+     * Cancels the current activity and returns true the context is no longer active, false if
+     * there is still another activity running.
+     * @return {?}
+     */
+    InteractionContext.prototype.cancelCurrentActivity = /**
+     * Cancels the current activity and returns true the context is no longer active, false if
+     * there is still another activity running.
+     * @return {?}
+     */
+    function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var when, activity;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        when = Dsl.disposeWith(this).when;
+                        return [4 /*yield*/, this.getCurrentActivity()];
+                    case 1:
+                        activity = _a.sent();
+                        return [2 /*return*/, new Promise((/**
+                             * @param {?} resolve
+                             * @return {?}
+                             */
+                            function (resolve) {
+                                when.valueOf(_this.activeActivity)
+                                    .changes((/**
+                                 * @param {?} nextActivity
+                                 * @return {?}
+                                 */
+                                function (nextActivity) {
+                                    resolve(!nextActivity);
+                                }), { once: true });
+                                activity.cancel();
+                            }))];
+                }
+            });
+        });
+    };
+    /**
+     * @return {?}
+     */
+    InteractionContext.prototype.abort = /**
+     * @return {?}
+     */
+    function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var count;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        assert.isTruthy(this.isActive());
+                        count = 1;
+                        return [4 /*yield*/, this.cancelCurrentActivity()];
+                    case 1:
+                        _a.sent();
+                        console.log("aborted -> " + count++);
+                        _a.label = 2;
+                    case 2:
+                        if (!this.isActive()) return [3 /*break*/, 4];
+                        return [4 /*yield*/, this.cancelCurrentActivity()];
+                    case 3:
+                        _a.sent();
+                        console.log("aborted -> " + count++);
+                        return [3 /*break*/, 2];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Promise)
+    ], InteractionContext.prototype, "abort", null);
     return InteractionContext;
 }(GarbageCollector));
 if (false) {
+    /** @type {?} */
+    InteractionContext.prototype.active;
     /** @type {?} */
     InteractionContext.prototype.activityList;
     /** @type {?} */
-    InteractionContext.prototype.active;
+    InteractionContext.prototype.activeActivity;
     /**
      * Returns the activity that is currently active.
      * This model is only updated in the next tick after the view has been updated.
      * @abstract
+     * @protected
      * @return {?}
      */
     InteractionContext.prototype.getCurrentActivity = function () { };
@@ -1353,13 +1434,14 @@ InteractionContextBase = /** @class */ (function (_super) {
          */
         _this._activityListDelegate = new DelegatingListModel();
         var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        when.listOf(_this.activityList).becomesPopulated((/**
-         * @param {?} activities
+        _this._currentActivity = chain(_this.activityList).last();
+        when.valueOf(_this._currentActivity).becomesTruthy((/**
+         * @param {?} activity
          * @return {?}
          */
-        function (activities) {
+        function (activity) {
             if (_this.deferredGetCurrentActivity) {
-                _this.deferredGetCurrentActivity.resolve(last(activities));
+                _this.deferredGetCurrentActivity.resolve(activity);
                 _this.deferredGetCurrentActivity = null;
             }
         }));
@@ -1388,6 +1470,16 @@ InteractionContextBase = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(InteractionContextBase.prototype, "activeActivity", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._currentActivity;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * Returns the activity that is currently active.
      * This model is only updated in the next tick after the view has been updated.
@@ -1414,12 +1506,14 @@ InteractionContextBase = /** @class */ (function (_super) {
                         return [2 /*return*/, this.deferredGetCurrentActivity.promise];
                     }
                     else {
-                        if (this.activityList.length < 1) {
+                        if (!this._currentActivity.value) {
+                            // we'be been asked before we've got any activities, create a deferred promise
+                            // that we resolve when the list populates.
                             this.deferredGetCurrentActivity = Deferred.defer();
                             return [2 /*return*/, this.deferredGetCurrentActivity.promise];
                         }
                         else {
-                            return [2 /*return*/, last(this.activityList.value)];
+                            return [2 /*return*/, this._currentActivity.value];
                         }
                     }
                 }
@@ -1521,6 +1615,11 @@ if (false) {
      * @private
      */
     InteractionContextBase.prototype.deferredGetCurrentActivity;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionContextBase.prototype._currentActivity;
     /**
      * @abstract
      * @protected
@@ -1947,6 +2046,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
+        this.updateActivityList();
         this._initialActivityOutletContext.value = null;
         this.initialActivityOutletContextEvent.emit(null);
     };
@@ -2182,6 +2282,15 @@ var InteractionService = /** @class */ (function () {
     function () {
         return this.active.value;
     };
+    /**
+     * @return {?}
+     */
+    InteractionService.prototype.isModalActive = /**
+     * @return {?}
+     */
+    function () {
+        return this.modelInteractionActive.value;
+    };
     /**
      * @param {?} disposable
      * @return {?}
@@ -2207,19 +2316,19 @@ var InteractionService = /** @class */ (function () {
     function (interactionContext) {
         interactionContext.registerDisposable(new InteractionService.Monitor("ip" + ++inplaceMonitorCount, interactionContext, this._activeInlineInteractionContextModel, this.exclusiveContext));
     };
+    // @Trace()
+    // @Trace()
     /**
      * @return {?}
      */
-    InteractionService.prototype.getCurrentActivity = /**
+    InteractionService.prototype.getActiveContext = 
+    // @Trace()
+    /**
      * @return {?}
      */
     function () {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                assert$1.isTruthy(this.isActive());
-                return [2 /*return*/, this._activeInteractionContext.value.getCurrentActivity()];
-            });
-        });
+        assert$1.isTruthy(this.isActive());
+        return this._activeInteractionContext.value;
     };
     /**
      * Creates an interaction context that will prevent any other contexts from starting an
@@ -3552,67 +3661,110 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var PlaceComponentDeactivationHandler = /** @class */ (function () {
-    function PlaceComponentDeactivationHandler(component, navigationSession) {
+    function PlaceComponentDeactivationHandler(component, navigationState, isPrimaryComponent) {
         this.component = component;
-        this.navigationSession = navigationSession;
+        this.navigationState = navigationState;
+        this.isPrimaryComponent = isPrimaryComponent;
     }
+    Object.defineProperty(PlaceComponentDeactivationHandler.prototype, "interactionService", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.navigationState.interactionService;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PlaceComponentDeactivationHandler.prototype, "placeRouter", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.navigationState.placeRouter;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
+     * @param {?} currentUrl
      * @param {?} nextState
      * @return {?}
      */
     PlaceComponentDeactivationHandler.prototype.canDeactivate = /**
+     * @param {?} currentUrl
      * @param {?} nextState
      * @return {?}
      */
-    function (nextState) {
+    function (currentUrl, nextState) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 // We'll get called multiple times if there's any parameter sanitisation so
                 // we always return true if we accepted promise from a previous cycle of the current
                 // navigation session.
                 if (!this.canDeactivatePromise) {
-                    this.canDeactivatePromise = this.canDeactivateComponent(nextState);
+                    console.log("creating deactivate promise for -> " + this.component.constructor.name);
+                    this.canDeactivatePromise = this.canDeactivateComponent(currentUrl, nextState);
                 }
                 return [2 /*return*/, this.canDeactivatePromise];
             });
         });
     };
+    // @Trace()
+    // @Trace()
     /**
      * @protected
+     * @param {?} currentUrl
      * @param {?} nextState
      * @return {?}
      */
-    PlaceComponentDeactivationHandler.prototype.canDeactivateComponent = /**
+    PlaceComponentDeactivationHandler.prototype.canDeactivateComponent = 
+    // @Trace()
+    /**
      * @protected
+     * @param {?} currentUrl
      * @param {?} nextState
      * @return {?}
      */
-    function (nextState) {
+    function (currentUrl, nextState) {
         return __awaiter(this, void 0, void 0, function () {
-            var activity;
+            var routeIds, currentIds;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (!(this.navigationSession.isPopState && this.component.interactionContext && this.component.interactionContext.isActive())) return [3 /*break*/, 2];
-                        // Note: Modal interactions are run in a different router outlet so we never get place deactivating while
-                        // a model interaction is active. This is because:
-                        // 1. the user can't click anything to navigate away
-                        // 2. clicking the back button will only change the outlet route portion of the URL. This
-                        //    is all handled by the InteractionGuard and so the component guards will never run.
-                        //
-                        // Now we just cancel the current activity...
-                        return [4 /*yield*/, this.component.interactionContext.getCurrentActivity()];
+                        console.log(this.navigationState.toString());
+                        if (!this.navigationState.isPopState) return [3 /*break*/, 5];
+                        if (!(this.isPrimaryComponent && this.interactionService.isModalActive())) return [3 /*break*/, 3];
+                        routeIds = this.placeRouter.getActiveInteractionIdsFromUrl(nextState.url);
+                        currentIds = this.interactionService.activeInteractionContextIds.value;
+                        if (!!isEqual(currentIds, routeIds)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.interactionService.getActiveContext().cancelCurrentActivity()];
                     case 1:
-                        activity = _a.sent();
-                        activity.cancel(null);
-                        return [2 /*return*/, false]; // ..and stay where we are.
-                    case 2:
+                        _a.sent();
+                        return [2 /*return*/, currentUrl.updateInteractionIds(this.interactionService.activeInteractionContextIds.value)];
+                    case 2: return [3 /*break*/, 5];
+                    case 3:
+                        if (!(this.component.interactionContext && this.component.interactionContext.isActive())) return [3 /*break*/, 5];
+                        return [4 /*yield*/, this.component.interactionContext.cancelCurrentActivity()];
+                    case 4:
+                        _a.sent();
+                        return [2 /*return*/, currentUrl
+                                .updateInteractionIds(this.interactionService.activeInteractionContextIds.value)];
+                    case 5:
                         // Ok, so now we're really leaving, so we ask the component if we should.;
-                        if (this.isNotJustAChangeInRouteId(nextState) && this.component.canDeactivate) {
-                            // No interaction in progress, so ask the component .
-                            // This may start an interaction, hence checking the interaction context before now. I.e. if the place pops up the dialog, and
-                            // the user clicks back again, we'll re-enter here and go bang when the component tries to open another dialog.
-                            return [2 /*return*/, this.component.canDeactivate(this.navigationSession.interactionContext)];
+                        if (this.isNotJustAChangeInRouteId(nextState)) {
+                            if (this.component.canDeactivate) {
+                                // No interaction in progress, so ask the component .
+                                // This may start an interaction, hence checking the interaction context before now. I.e. if the place pops up the dialog, and
+                                // the user clicks back again, we'll re-enter here and go bang when the component tries to open another dialog.
+                                return [2 /*return*/, this.component.canDeactivate(this.navigationState.interactionContext)];
+                            }
+                            // The component has an active interaction but no deactivation hook.  Rather than guessing what to do
+                            // we'll just cancel the navigation and print a warning.
+                            if (this.component.interactionContext && this.component.interactionContext.isActive()) {
+                                console.warn('Route changed while component has active interaction, cancelling navigation');
+                                return [2 /*return*/, false];
+                            }
                         }
                         return [2 /*return*/, true];
                 }
@@ -3646,7 +3798,9 @@ if (false) {
     /** @type {?} */
     PlaceComponentDeactivationHandler.prototype.component;
     /** @type {?} */
-    PlaceComponentDeactivationHandler.prototype.navigationSession;
+    PlaceComponentDeactivationHandler.prototype.navigationState;
+    /** @type {?} */
+    PlaceComponentDeactivationHandler.prototype.isPrimaryComponent;
 }
 
 /**
@@ -3667,6 +3821,16 @@ NavigationState = /** @class */ (function (_super) {
         _this._visits = new Map();
         return _this;
     }
+    Object.defineProperty(NavigationState.prototype, "name", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.constructor.name;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(NavigationState.prototype, "idle", {
         get: /**
          * @return {?}
@@ -3729,6 +3893,19 @@ NavigationState = /** @class */ (function (_super) {
     function (placeDef) {
         return this._visits.get(placeDef);
     };
+    /**
+     * @param {?} visit
+     * @param {?} initialUrl
+     * @return {?}
+     */
+    NavigationState.prototype.onPlaceNavigationStart = /**
+     * @param {?} visit
+     * @param {?} initialUrl
+     * @return {?}
+     */
+    function (visit, initialUrl) {
+        return this.illegalTransition('onPlaceNavigationStart');
+    };
     /**
      * @param {?} event
      * @return {?}
@@ -3744,7 +3921,7 @@ NavigationState = /** @class */ (function (_super) {
      * @param {?} event
      * @return {?}
      */
-    NavigationState.prototype.onStart = /**
+    NavigationState.prototype.onRouterStarted = /**
      * @param {?} event
      * @return {?}
      */
@@ -3755,7 +3932,7 @@ NavigationState = /** @class */ (function (_super) {
      * @param {?} event
      * @return {?}
      */
-    NavigationState.prototype.onCancel = /**
+    NavigationState.prototype.onRouterCancelled = /**
      * @param {?} event
      * @return {?}
      */
@@ -3766,7 +3943,7 @@ NavigationState = /** @class */ (function (_super) {
      * @param {?} event
      * @return {?}
      */
-    NavigationState.prototype.onError = /**
+    NavigationState.prototype.onRouterError = /**
      * @param {?} event
      * @return {?}
      */
@@ -3777,7 +3954,7 @@ NavigationState = /** @class */ (function (_super) {
      * @param {?} event
      * @return {?}
      */
-    NavigationState.prototype.onEnd = /**
+    NavigationState.prototype.onRouterEnd = /**
      * @param {?} event
      * @return {?}
      */
@@ -3797,15 +3974,17 @@ NavigationState = /** @class */ (function (_super) {
     };
     /**
      * @param {?} component
-     * @param {?} nextState
+     * @param {?} currentUrl
+     * @param {?} nextUrl
      * @return {?}
      */
     NavigationState.prototype.canDeactivatePlace = /**
      * @param {?} component
-     * @param {?} nextState
+     * @param {?} currentUrl
+     * @param {?} nextUrl
      * @return {?}
      */
-    function (component, nextState) {
+    function (component, currentUrl, nextUrl) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 return [2 /*return*/, this.illegalTransition('canDeactivatePlace')];
@@ -3858,12 +4037,29 @@ NavigationState = /** @class */ (function (_super) {
      * @return {?}
      */
     function (event) {
-        // TODO: check if the event is purely for interaction context changes.
         /** @type {?} */
         var popstate = event.navigationTrigger === 'popstate';
         return popstate ?
-            new NavigationState.NavigationBackTransition(this.context, popstate, this.currentRouterUrl()) :
-            new NavigationState.NavigationTransition(this.context, popstate, this.currentRouterUrl());
+            this.interactionService.isActive() ?
+                new NavigationState.InteractionPopStateTransition(this.context, this.currentRouterUrl()) :
+                new NavigationState.PopStateTransition(this.context, this.currentRouterUrl())
+            :
+                this.interactionService.isActive() ?
+                    new NavigationState.InteractionTransition(this.context, this.currentRouterUrl()) :
+                    new NavigationState.NavigationTransition(this.context, this.currentRouterUrl());
+    };
+    /**
+     * @protected
+     * @return {?}
+     */
+    NavigationState.prototype.createIdleState = /**
+     * @protected
+     * @return {?}
+     */
+    function () {
+        return this.interactionService.isActive() ?
+            new NavigationState.IdleDuringInteraction(this.context, this.currentRouterUrl()) :
+            new NavigationState.Idle(this.context);
     };
     /**
      * @param {?} url
@@ -3874,12 +4070,7 @@ NavigationState = /** @class */ (function (_super) {
      * @return {?}
      */
     function (url) {
-        var _this = this;
-        // TODO: Should this be a navigate operation to avoid confusing the router...??
-        setTimeout((/**
-         * @return {?}
-         */
-        function () { return _this.placeRouter.resetBrowserLocation(url); }));
+        this.placeRouter.resetBrowserLocation(url);
     };
     /**
      * @return {?}
@@ -3937,11 +4128,27 @@ if (false) {
             _this.isPopState = false;
             return _this;
         }
+        /**
+         * @param {?} visit
+         * @param {?} initialUrl
+         * @return {?}
+         */
+        Idle.prototype.onPlaceNavigationStart = /**
+         * @param {?} visit
+         * @param {?} initialUrl
+         * @return {?}
+         */
+        function (visit, initialUrl) {
+            /** @type {?} */
+            var navigationTransition = new NavigationTransition(this.context, initialUrl);
+            navigationTransition.storeVisit(visit);
+            return navigationTransition;
+        };
         /**
          * @param {?} event
          * @return {?}
          */
-        Idle.prototype.onStart = /**
+        Idle.prototype.onRouterStarted = /**
          * @param {?} event
          * @return {?}
          */
@@ -3989,9 +4196,8 @@ if (false) {
      */
     AbstractNavigationTransition = /** @class */ (function (_super) {
         __extends(AbstractNavigationTransition, _super);
-        function AbstractNavigationTransition(context, isPopState, startingUrl) {
+        function AbstractNavigationTransition(context, startingUrl) {
             var _this = _super.call(this, context) || this;
-            _this.isPopState = isPopState;
             _this.startingUrl = startingUrl;
             _this.isTransitional = true;
             _this.componentDeactivationHandlers = new Map();
@@ -4024,7 +4230,7 @@ if (false) {
          * @param {?} event
          * @return {?}
          */
-        AbstractNavigationTransition.prototype.onStart = /**
+        AbstractNavigationTransition.prototype.onRouterStarted = /**
          * @param {?} event
          * @return {?}
          */
@@ -4037,7 +4243,7 @@ if (false) {
          * @param {?} event
          * @return {?}
          */
-        AbstractNavigationTransition.prototype.onEnd = /**
+        AbstractNavigationTransition.prototype.onRouterEnd = /**
          * @param {?} event
          * @return {?}
          */
@@ -4055,37 +4261,38 @@ if (false) {
          * @return {?}
          */
         function (locationTriggerUrl) {
-            // detach the interactoin from the session so it doesn't get disposed until the activity
-            // has completed.
+            Logger.get(this).info("back button pressed during navigation session interaction promise");
+            // detach the interaction from the session so it doesn't get disposed until the activity has completed.
             /** @type {?} */
-            var context = this.detachInteractionContext();
-            var when = Dsl.disposeWith(context).when;
+            var navigationInteraction = this.detachInteractionContext();
+            var when = Dsl.disposeWith(navigationInteraction).when;
             // TODO: I need to make the exclusive interaction context disallow nested activities or
-            //       that would mess things up entirely.
-            context.getCurrentActivity().then((/**
-             * @param {?} activity
+            //       that would mess things up entirely. Or, can I do a context.abortAll().then(..)
+            navigationInteraction.cancelCurrentActivity().then((/**
              * @return {?}
              */
-            function (activity) {
-                when.valueOf(context.active).becomesFalsey((/**
-                 * @return {?}
-                 */
-                function () { return context.dispose(); }), { once: true });
-                activity.cancel(null);
+            function () {
+                navigationInteraction.dispose();
             }));
-            return new CancelledDuringNavigationInteraction(this.context, this.startingUrl, locationTriggerUrl);
+            return new CancelledDuringNavigationInteraction(this.context, this.startingUrl, this.isPopState, locationTriggerUrl);
         };
+        // @Trace()
+        // @Trace()
         /**
          * @param {?} component
-         * @param {?} nextState
+         * @param {?} currentUrl
+         * @param {?} nextUrl
          * @return {?}
          */
-        AbstractNavigationTransition.prototype.canDeactivatePlace = /**
+        AbstractNavigationTransition.prototype.canDeactivatePlace = 
+        // @Trace()
+        /**
          * @param {?} component
-         * @param {?} nextState
+         * @param {?} currentUrl
+         * @param {?} nextUrl
          * @return {?}
          */
-        function (component, nextState) {
+        function (component, currentUrl, nextUrl) {
             return __awaiter(this, void 0, void 0, function () {
                 var handler, isPrimaryHandler;
                 return __generator(this, function (_a) {
@@ -4093,10 +4300,10 @@ if (false) {
                     handler = this.componentDeactivationHandlers.get(component);
                     if (!handler) {
                         isPrimaryHandler = this.componentDeactivationHandlers.size === 0;
-                        handler = new PlaceComponentDeactivationHandler(component, this);
+                        handler = new PlaceComponentDeactivationHandler(component, this, isPrimaryHandler);
                         this.componentDeactivationHandlers.set(component, handler);
                     }
-                    return [2 /*return*/, handler.canDeactivate(nextState)];
+                    return [2 /*return*/, handler.canDeactivate(currentUrl, nextUrl)];
                 });
             });
         };
@@ -4131,8 +4338,6 @@ if (false) {
          */
         AbstractNavigationTransition.prototype._interactionContext;
         /** @type {?} */
-        AbstractNavigationTransition.prototype.isPopState;
-        /** @type {?} */
         AbstractNavigationTransition.prototype.startingUrl;
     }
     var NavigationTransition = /** @class */ (function (_super) {
@@ -4146,44 +4351,18 @@ if (false) {
          * @param {?} event
          * @return {?}
          */
-        NavigationTransition.prototype.onStart = /**
+        NavigationTransition.prototype.onRouterCancelled = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            // active sessions can have many cancel start cycles due
-            // to place guard redirects
             return this;
         };
         /**
          * @param {?} event
          * @return {?}
          */
-        NavigationTransition.prototype.onEnd = /**
-         * @param {?} event
-         * @return {?}
-         */
-        function (event) {
-            // navigation succeeded
-            this.context.notifySuccess(this);
-            return new Idle(this.context);
-        };
-        /**
-         * @param {?} event
-         * @return {?}
-         */
-        NavigationTransition.prototype.onCancel = /**
-         * @param {?} event
-         * @return {?}
-         */
-        function (event) {
-            return new Idle(this.context);
-        };
-        /**
-         * @param {?} event
-         * @return {?}
-         */
-        NavigationTransition.prototype.onError = /**
+        NavigationTransition.prototype.onRouterError = /**
          * @param {?} event
          * @return {?}
          */
@@ -4207,9 +4386,9 @@ if (false) {
         /** @type {?} */
         NavigationTransition.prototype.isPopState;
     }
-    var NavigationBackTransition = /** @class */ (function (_super) {
-        __extends(NavigationBackTransition, _super);
-        function NavigationBackTransition() {
+    var PopStateTransition = /** @class */ (function (_super) {
+        __extends(PopStateTransition, _super);
+        function PopStateTransition() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
             _this.isPopState = true;
             return _this;
@@ -4218,7 +4397,7 @@ if (false) {
          * @param {?} event
          * @return {?}
          */
-        NavigationBackTransition.prototype.onCancel = /**
+        PopStateTransition.prototype.onRouterCancelled = /**
          * @param {?} event
          * @return {?}
          */
@@ -4233,7 +4412,7 @@ if (false) {
          * @param {?} event
          * @return {?}
          */
-        NavigationBackTransition.prototype.onError = /**
+        PopStateTransition.prototype.onRouterError = /**
          * @param {?} event
          * @return {?}
          */
@@ -4247,12 +4426,82 @@ if (false) {
             }
             return new Idle(this.context);
         };
-        return NavigationBackTransition;
+        return PopStateTransition;
     }(AbstractNavigationTransition));
-    NavigationState.NavigationBackTransition = NavigationBackTransition;
+    NavigationState.PopStateTransition = PopStateTransition;
+    if (false) {
+        /** @type {?} */
+        PopStateTransition.prototype.isPopState;
+    }
+    var IdleDuringInteraction = /** @class */ (function (_super) {
+        __extends(IdleDuringInteraction, _super);
+        function IdleDuringInteraction(context, startingUrl) {
+            var _this = _super.call(this, context) || this;
+            _this.startingUrl = startingUrl;
+            _this.isTransitional = false;
+            _this.isPopState = false;
+            return _this;
+        }
+        /**
+         * @param {?} visit
+         * @param {?} initialUrl
+         * @return {?}
+         */
+        IdleDuringInteraction.prototype.onPlaceNavigationStart = /**
+         * @param {?} visit
+         * @param {?} initialUrl
+         * @return {?}
+         */
+        function (visit, initialUrl) {
+            /** @type {?} */
+            var navigationTransition = new InteractionTransition(this.context, initialUrl);
+            navigationTransition.storeVisit(visit);
+            return navigationTransition;
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        IdleDuringInteraction.prototype.onRouterStarted = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            return new InteractionTransition(this.context, event.url);
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        IdleDuringInteraction.prototype.onPopState = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            return new InteractionPopStateTransition(this.context, event.url);
+        };
+        __decorate([
+            Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [NavigationStart]),
+            __metadata("design:returntype", NavigationState)
+        ], IdleDuringInteraction.prototype, "onRouterStarted", null);
+        __decorate([
+            Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [NavigationStart]),
+            __metadata("design:returntype", NavigationState)
+        ], IdleDuringInteraction.prototype, "onPopState", null);
+        return IdleDuringInteraction;
+    }(NavigationState));
+    NavigationState.IdleDuringInteraction = IdleDuringInteraction;
     if (false) {
         /** @type {?} */
-        NavigationBackTransition.prototype.isPopState;
+        IdleDuringInteraction.prototype.isTransitional;
+        /** @type {?} */
+        IdleDuringInteraction.prototype.isPopState;
+        /** @type {?} */
+        IdleDuringInteraction.prototype.startingUrl;
     }
     /**
      * @abstract
@@ -4263,29 +4512,13 @@ if (false) {
     AbstractInteractionTransition = /** @class */ (function (_super) {
         __extends(AbstractInteractionTransition, _super);
         function AbstractInteractionTransition(context, startingUrl) {
-            var _this = _super.call(this, context) || this;
+            var _this = _super.call(this, context, startingUrl) || this;
             _this.startingUrl = startingUrl;
             _this.isTransitional = true;
             return _this;
         }
-        /**
-         * @protected
-         * @return {?}
-         */
-        AbstractInteractionTransition.prototype.reinstateInteractionRoute = /**
-         * @protected
-         * @return {?}
-         */
-        function () {
-            var _this = this;
-            console.log(this.startingUrl);
-            setTimeout((/**
-             * @return {?}
-             */
-            function () { return _this.placeRouter.syncInteractionIdsWithRouter(); }));
-        };
         return AbstractInteractionTransition;
-    }(NavigationState));
+    }(AbstractNavigationTransition));
     NavigationState.AbstractInteractionTransition = AbstractInteractionTransition;
     if (false) {
         /** @type {?} */
@@ -4312,115 +4545,122 @@ if (false) {
          * @param {?} event
          * @return {?}
          */
-        InteractionTransition.prototype.onEnd = /**
+        InteractionTransition.prototype.onRouterCancelled = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
             if (this.context.interactionService.isActive()) {
-                this.reinstateInteractionRoute();
+                /** @type {?} */
+                var interactionIds = this.interactionService.activeInteractionContextIds.value;
+                this.resetBrowserLocation(this.placeRouter.parseUrl(this.startingUrl).updateInteractionIds(interactionIds).url);
                 return new IdleDuringInteraction(this.context, this.startingUrl);
             }
             else {
                 return new Idle(this.context);
             }
         };
-        return InteractionTransition;
-    }(AbstractInteractionTransition));
-    NavigationState.InteractionTransition = InteractionTransition;
-    if (false) {
-        /** @type {?} */
-        InteractionTransition.prototype.isPopState;
-    }
-    /**
-     * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
-     * happily ignore interaction contexts.
-     */
-    var /**
-     * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
-     * happily ignore interaction contexts.
-     */
-    InteractionBackTransition = /** @class */ (function (_super) {
-        __extends(InteractionBackTransition, _super);
-        function InteractionBackTransition() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.isPopState = true;
-            return _this;
-        }
         /**
          * @param {?} event
          * @return {?}
          */
-        InteractionBackTransition.prototype.onEnd = /**
+        InteractionTransition.prototype.onRouterError = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            if (this.interactionService.isActive()) {
-                this.reinstateInteractionRoute();
+            // navigation was aborted.
+            return new IdleDuringInteraction(this.context, this.startingUrl);
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        InteractionTransition.prototype.onRouterEnd = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            if (this.context.interactionService.isActive()) {
                 return new IdleDuringInteraction(this.context, this.startingUrl);
             }
             else {
                 return new Idle(this.context);
             }
         };
-        return InteractionBackTransition;
+        return InteractionTransition;
     }(AbstractInteractionTransition));
-    NavigationState.InteractionBackTransition = InteractionBackTransition;
+    NavigationState.InteractionTransition = InteractionTransition;
     if (false) {
         /** @type {?} */
-        InteractionBackTransition.prototype.isPopState;
+        InteractionTransition.prototype.isPopState;
     }
-    var IdleDuringInteraction = /** @class */ (function (_super) {
-        __extends(IdleDuringInteraction, _super);
-        function IdleDuringInteraction(context, startingUrl) {
-            var _this = _super.call(this, context) || this;
-            _this.startingUrl = startingUrl;
-            _this.isTransitional = false;
-            _this.isPopState = false;
+    /**
+     * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+     * happily ignore interaction contexts.
+     */
+    var /**
+     * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+     * happily ignore interaction contexts.
+     */
+    InteractionPopStateTransition = /** @class */ (function (_super) {
+        __extends(InteractionPopStateTransition, _super);
+        function InteractionPopStateTransition() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.isPopState = true;
             return _this;
         }
         /**
          * @param {?} event
          * @return {?}
          */
-        IdleDuringInteraction.prototype.onStart = /**
+        InteractionPopStateTransition.prototype.onRouterCancelled = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            return new InteractionTransition(this.context, event.url);
+            if (this.interactionService.isActive()) {
+                /** @type {?} */
+                var interactionIds = this.interactionService.activeInteractionContextIds.value;
+                this.resetBrowserLocation(this.placeRouter.parseUrl(this.startingUrl).updateInteractionIds(interactionIds).url);
+                return new IdleDuringInteraction(this.context, this.startingUrl);
+            }
+            else {
+                return new Idle(this.context);
+            }
         };
         /**
          * @param {?} event
          * @return {?}
          */
-        IdleDuringInteraction.prototype.onPopState = /**
+        InteractionPopStateTransition.prototype.onRouterEnd = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            return new InteractionBackTransition(this.context, event.url);
+            if (this.context.interactionService.isActive()) {
+                return new IdleDuringInteraction(this.context, this.startingUrl);
+            }
+            else {
+                return new Idle(this.context);
+            }
         };
-        return IdleDuringInteraction;
-    }(NavigationState));
-    NavigationState.IdleDuringInteraction = IdleDuringInteraction;
+        return InteractionPopStateTransition;
+    }(AbstractInteractionTransition));
+    NavigationState.InteractionPopStateTransition = InteractionPopStateTransition;
     if (false) {
         /** @type {?} */
-        IdleDuringInteraction.prototype.isTransitional;
-        /** @type {?} */
-        IdleDuringInteraction.prototype.isPopState;
-        /** @type {?} */
-        IdleDuringInteraction.prototype.startingUrl;
+        InteractionPopStateTransition.prototype.isPopState;
     }
     var CancelledDuringNavigationInteraction = /** @class */ (function (_super) {
         __extends(CancelledDuringNavigationInteraction, _super);
-        function CancelledDuringNavigationInteraction(context, startingUrl, locationChangeTriggerUrl) {
+        function CancelledDuringNavigationInteraction(context, startingUrl, startingEventWasAPopState, locationChangeTriggerUrl) {
             var _this = _super.call(this, context) || this;
             _this.startingUrl = startingUrl;
+            _this.startingEventWasAPopState = startingEventWasAPopState;
             _this.locationChangeTriggerUrl = locationChangeTriggerUrl;
             _this.isPopState = false;
-            _this.capturedFauxRouterStart = false;
+            _this.gotPopStateWithLeavingUrl = false;
             return _this;
         }
         Object.defineProperty(CancelledDuringNavigationInteraction.prototype, "isTransitional", {
@@ -4428,7 +4668,7 @@ if (false) {
              * @return {?}
              */
             function () {
-                return !this.capturedFauxRouterStart;
+                return true;
             },
             enumerable: true,
             configurable: true
@@ -4437,35 +4677,34 @@ if (false) {
          * @param {?} event
          * @return {?}
          */
-        CancelledDuringNavigationInteraction.prototype.onStart = /**
+        CancelledDuringNavigationInteraction.prototype.onRouterStarted = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            if (event.url === this.locationChangeTriggerUrl && !this.capturedFauxRouterStart) {
-                this.capturedFauxRouterStart = true;
-                return this.ignore(event, 'url matched back button location change');
-            }
-            else {
-                return this.createTransitionStateFor(event);
-            }
+            return this.ignore(event);
         };
         /**
          * @param {?} event
          * @return {?}
          */
-        CancelledDuringNavigationInteraction.prototype.onCancel = /**
+        CancelledDuringNavigationInteraction.prototype.onRouterCancelled = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            return this.ignore(event);
+            // Depending on the state of the router and what was done we get a different
+            // sequence of events.  I.e.  If they just clicked a link we'll get a cancel
+            // with the locationChangeTriggerUrl as the final event. However the user
+            // started the initial navigation with a pop state then we'll get one of
+            // those with the locationChangeTriggerUrl but no cancel event with it.
+            return this.gotPopStateWithLeavingUrl || this.locationChangeTriggerUrl === event.url ? this.createIdleState() : this.ignore(event);
         };
         /**
          * @param {?} event
          * @return {?}
          */
-        CancelledDuringNavigationInteraction.prototype.onEnd = /**
+        CancelledDuringNavigationInteraction.prototype.onRouterEnd = /**
          * @param {?} event
          * @return {?}
          */
@@ -4476,7 +4715,7 @@ if (false) {
          * @param {?} event
          * @return {?}
          */
-        CancelledDuringNavigationInteraction.prototype.onError = /**
+        CancelledDuringNavigationInteraction.prototype.onRouterError = /**
          * @param {?} event
          * @return {?}
          */
@@ -4492,7 +4731,31 @@ if (false) {
          * @return {?}
          */
         function (event) {
-            return this.createTransitionStateFor(event);
+            this.gotPopStateWithLeavingUrl = this.gotPopStateWithLeavingUrl || event.url === this.locationChangeTriggerUrl;
+            return this.ignore(event);
+        };
+        // @Trace()
+        // @Trace()
+        /**
+         * @param {?} component
+         * @param {?} currentUrl
+         * @param {?} nextUrl
+         * @return {?}
+         */
+        CancelledDuringNavigationInteraction.prototype.canDeactivatePlace = 
+        // @Trace()
+        /**
+         * @param {?} component
+         * @param {?} currentUrl
+         * @param {?} nextUrl
+         * @return {?}
+         */
+        function (component, currentUrl, nextUrl) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, false];
+                });
+            });
         };
         /**
          * @param {?} event
@@ -4505,7 +4768,7 @@ if (false) {
          * @return {?}
          */
         function (event, reason) {
-            reason = reason ? " (" + reason + ")" : '';
+            reason = reason ? " -> " + reason : '';
             Logger.get(this).info("ignoring router event" + reason + ": " + event.constructor.name + " -> " + event.url);
             return this;
         };
@@ -4516,8 +4779,14 @@ if (false) {
          * @return {?}
          */
         function () {
-            return this.constructor.name + "(startingUrl: " + this.startingUrl + ", locationChangeTriggerUrl:" + this.locationChangeTriggerUrl + ")";
+            return this.constructor.name + "(isIdl: " + this.idle + ", startingUrl: " + this.startingUrl + ", locationChangeTriggerUrl:" + this.locationChangeTriggerUrl + ")";
         };
+        __decorate([
+            Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [NavigationCancel]),
+            __metadata("design:returntype", NavigationState)
+        ], CancelledDuringNavigationInteraction.prototype, "onRouterCancelled", null);
         return CancelledDuringNavigationInteraction;
     }(NavigationState));
     NavigationState.CancelledDuringNavigationInteraction = CancelledDuringNavigationInteraction;
@@ -4528,10 +4797,12 @@ if (false) {
          * @type {?}
          * @private
          */
-        CancelledDuringNavigationInteraction.prototype.capturedFauxRouterStart;
+        CancelledDuringNavigationInteraction.prototype.gotPopStateWithLeavingUrl;
         /** @type {?} */
         CancelledDuringNavigationInteraction.prototype.startingUrl;
         /** @type {?} */
+        CancelledDuringNavigationInteraction.prototype.startingEventWasAPopState;
+        /** @type {?} */
         CancelledDuringNavigationInteraction.prototype.locationChangeTriggerUrl;
     }
 })(NavigationState || (NavigationState = {}));
@@ -4622,25 +4893,26 @@ if (false) {
  */
 var UrlSnapshot = /** @class */ (function () {
     // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
-    function UrlSnapshot(urlSerializer, url) {
+    function UrlSnapshot(urlSerializer, url, options) {
         this.urlSerializer = urlSerializer;
         this.url = url;
+        this.options = options;
         this.urlTree = urlSerializer.parse(url);
     }
     /**
-     * @protected
      * @param {?} visit
      * @return {?}
      */
-    UrlSnapshot.prototype.replaceExistingVisitSegmentsWith = /**
-     * @protected
+    UrlSnapshot.prototype.updateVisitSegments = /**
      * @param {?} visit
      * @return {?}
      */
     function (visit) {
+        /** @type {?} */
+        var urlTree = this.urlSerializer.parse(this.url);
         // Ugly, but it works for now.
         /** @type {?} */
-        var segments = __spread(this.getPrimarySegments());
+        var segments = __spread(this.getPrimarySegments(urlTree));
         /** @type {?} */
         var visitSegments = this.getSegmentsFor(visit);
         /** @type {?} */
@@ -4651,17 +4923,20 @@ var UrlSnapshot = /** @class */ (function () {
         function (segment) { return segment.path === visitSegments[0].path; }));
         // do not use the return value, it's the items that were removed!
         segments.splice.apply(segments, __spread([replaceAt, visitSegments.length], visitSegments));
-        return segments;
+        urlTree.root.children.primary.segments = segments;
+        return new UrlSnapshot(this.urlSerializer, urlTree.toString(), this.options);
     };
     /**
      * @private
+     * @param {?} urlTree
      * @return {?}
      */
     UrlSnapshot.prototype.getPrimarySegments = /**
      * @private
+     * @param {?} urlTree
      * @return {?}
      */
-    function () {
+    function (urlTree) {
         return this.urlTree.root.children.primary.segments;
     };
     /**
@@ -4694,31 +4969,6 @@ var UrlSnapshot = /** @class */ (function () {
                     new UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit))
                 ];
     };
-    /**
-     * @param {?} visit
-     * @return {?}
-     */
-    UrlSnapshot.prototype.createRedirectCommandsFor = /**
-     * @param {?} visit
-     * @return {?}
-     */
-    function (visit) {
-        /** @type {?} */
-        var segments = this.replaceExistingVisitSegmentsWith(visit);
-        /** @type {?} */
-        var commands = [];
-        segments.forEach((/**
-         * @param {?} s
-         * @return {?}
-         */
-        function (s) {
-            commands.push(s.path);
-            if (s.parameterMap.keys.length > 0) {
-                commands.push(s.parameters);
-            }
-        }));
-        return commands;
-    };
     /**
      * @param {?} placeDef
      * @return {?}
@@ -4728,7 +4978,7 @@ var UrlSnapshot = /** @class */ (function () {
      * @return {?}
      */
     function (placeDef) {
-        return this.getPrimarySegments().find((/**
+        return this.getPrimarySegments(this.urlTree).find((/**
          * @param {?} s
          * @return {?}
          */
@@ -4742,53 +4992,101 @@ var UrlSnapshot = /** @class */ (function () {
      */
     function () {
         /** @type {?} */
-        var interactionOutlet = this.urlTree.root.children[UrlSnapshot.INTERACTION_ROUTER_OUTLET];
-        if (interactionOutlet) {
-            assert.isTruthy(interactionOutlet.segments.length === 2);
-            assert.isTruthy(interactionOutlet.segments[0].path === UrlSnapshot.INTERACTION_ROUTER_PATH);
-            return UrlSnapshot.parseInteractionIds(interactionOutlet.segments[1].path);
+        var queryParam = this.urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM];
+        if (queryParam) {
+            return UrlSnapshot.parseInteractionIds(queryParam);
         }
         else {
             return [];
         }
     };
+    /**
+     * @return {?}
+     */
+    UrlSnapshot.prototype.hasInteractionIds = /**
+     * @return {?}
+     */
+    function () {
+        return this.getInteractionIds().length > 0;
+    };
     // @Trace()
     // @Trace()
     /**
      * @param {?} ids
      * @return {?}
      */
-    UrlSnapshot.prototype.addOrReplaceInteractionIds = 
+    UrlSnapshot.prototype.updateInteractionIds = 
     // @Trace()
     /**
      * @param {?} ids
      * @return {?}
      */
     function (ids) {
+        if (ids.length === 0) {
+            return this.removeInteractionIds();
+        }
+        else {
+            /** @type {?} */
+            var urlTree = this.urlSerializer.parse(this.url);
+            urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM] = UrlSnapshot.createPathIdFor(ids);
+            return new UrlSnapshot(this.urlSerializer, urlTree.toString(), this.options);
+        }
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    UrlSnapshot.prototype.removeInteractionIds = 
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    function () {
         /** @type {?} */
         var urlTree = this.urlSerializer.parse(this.url);
-        urlTree.root.children[UrlSnapshot.INTERACTION_ROUTER_OUTLET] = new UrlSegmentGroup([
-            new UrlSegment(UrlSnapshot.INTERACTION_ROUTER_PATH, {}),
-            new UrlSegment(UrlSnapshot.createPathIdFor(ids), {})
-        ], {});
-        return new UrlSnapshot(this.urlSerializer, urlTree.toString());
+        if (urlTree.queryParams && urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM]) {
+            urlTree.queryParams = {}; //[UrlSnapshot.INTERACTION_ROUTER_OUTLET]
+        }
+        return new UrlSnapshot(this.urlSerializer, urlTree.toString(), this.options);
+    };
+    /**
+     * @param {?} options
+     * @return {?}
+     */
+    UrlSnapshot.prototype.withOptions = /**
+     * @param {?} options
+     * @return {?}
+     */
+    function (options) {
+        return new UrlSnapshot(this.urlSerializer, this.url, options);
+    };
+    /**
+     * @return {?}
+     */
+    UrlSnapshot.prototype.getNavigationExtras = /**
+     * @return {?}
+     */
+    function () {
+        return this.options;
     };
     return UrlSnapshot;
 }());
 if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
+    /** @type {?} */
     UrlSnapshot.prototype.urlTree;
     /** @type {?} */
     UrlSnapshot.prototype.urlSerializer;
     /** @type {?} */
     UrlSnapshot.prototype.url;
+    /**
+     * @type {?}
+     * @private
+     */
+    UrlSnapshot.prototype.options;
 }
 (function (UrlSnapshot) {
-    UrlSnapshot.INTERACTION_ROUTER_OUTLET = 'aup-interactions';
-    UrlSnapshot.INTERACTION_ROUTER_PATH = 'active';
+    UrlSnapshot.INTERACTION_QUERY_PARAM = 'aup-interactions';
     UrlSnapshot.INTERACTION_ID_SEPARATOR = '--';
     /**
      * @param {?} path
@@ -4807,13 +5105,14 @@ if (false) {
     }
     UrlSnapshot.createPathIdFor = createPathIdFor;
     /**
-     * @param {?} interactionIds
-     * @return {?}
+     * @record
      */
-    function createInteractionOutletRouterCommands(interactionIds) {
-        return [UrlSnapshot.INTERACTION_ROUTER_PATH, createPathIdFor(interactionIds)];
+    function NavigationOptions() { }
+    UrlSnapshot.NavigationOptions = NavigationOptions;
+    if (false) {
+        /** @type {?|undefined} */
+        NavigationOptions.prototype.replaceUrl;
     }
-    UrlSnapshot.createInteractionOutletRouterCommands = createInteractionOutletRouterCommands;
 })(UrlSnapshot || (UrlSnapshot = {}));
 
 /**
@@ -4860,7 +5159,6 @@ var PlaceRouter = /** @class */ (function (_super) {
             // NavigationStart -> .... -> NavigationError --> navigation aborted, end session.
             // =======================
             if (event instanceof NavigationStart) {
-                console.log(event);
                 if (event.navigationTrigger === 'popstate') {
                     _this.runStateTransition((/**
                      * @param {?} state
@@ -4873,7 +5171,7 @@ var PlaceRouter = /** @class */ (function (_super) {
                      * @param {?} state
                      * @return {?}
                      */
-                    function (state) { return state.onStart(event); }));
+                    function (state) { return state.onRouterStarted(event); }));
                 }
             }
             if (event instanceof NavigationEnd) {
@@ -4882,7 +5180,7 @@ var PlaceRouter = /** @class */ (function (_super) {
                  * @param {?} state
                  * @return {?}
                  */
-                function (state) { return state.onEnd(event); }));
+                function (state) { return state.onRouterEnd(event); }));
             }
             if (event instanceof NavigationError) {
                 console.log(event);
@@ -4890,7 +5188,7 @@ var PlaceRouter = /** @class */ (function (_super) {
                  * @param {?} state
                  * @return {?}
                  */
-                function (state) { return state.onError(event); }));
+                function (state) { return state.onRouterError(event); }));
             }
             if (event instanceof NavigationCancel) {
                 console.log(event);
@@ -4898,7 +5196,7 @@ var PlaceRouter = /** @class */ (function (_super) {
                  * @param {?} state
                  * @return {?}
                  */
-                function (state) { return state.onCancel(event); }));
+                function (state) { return state.onRouterCancelled(event); }));
             }
         }));
         // Push dialog state to the url so we can capture the back button.
@@ -4927,12 +5225,11 @@ var PlaceRouter = /** @class */ (function (_super) {
             var navigationState = _this._navigationStateModel.value;
             console.log("URLChange -> " + url, { state: navigationState });
             urlChanges.publish({ url: url, state: navigationState });
-            // We've entered a navigation transition
-            if (navigationState instanceof NavigationState.NavigationTransition) {
+            // The url has changed while we're in a transitional state
+            if (navigationState.isTransitional) {
                 /** @type {?} */
                 var navigationInteraction = _this.navigationState.interactionContext;
                 if (navigationInteraction && navigationInteraction.isActive()) {
-                    Logger.get(_this).info("back button pressed during navigation session interaction promise");
                     _this.runStateTransition((/**
                      * @param {?} state
                      * @return {?}
@@ -5073,9 +5370,9 @@ var PlaceRouter = /** @class */ (function (_super) {
                          */
                         function (router) {
                             /** @type {?} */
-                            var commands = _this.parseUrl(_this.router.routerState.snapshot.url).createRedirectCommandsFor(next);
-                            console.log('### Push Changes to route Redirect', { commands: commands });
-                            return router.navigate(commands);
+                            var urlSnapshot = _this.parseUrl(_this.router.routerState.snapshot.url).updateVisitSegments(next);
+                            console.log('### Push Changes to route Redirect', { commands: urlSnapshot.url });
+                            return _this.navigateByUrl(urlSnapshot);
                         }))];
                 }
                 return [2 /*return*/];
@@ -5107,7 +5404,7 @@ var PlaceRouter = /** @class */ (function (_super) {
                          */
                         function (current) {
                             /** @type {?} */
-                            var session = new NavigationState.NavigationTransition(_this._navigationSessionContext, false, _this.router.routerState.snapshot.url);
+                            var session = _this.navigationState.onPlaceNavigationStart(visit, _this.getCurrentRouterUrl());
                             session.storeVisit(visit);
                             return session;
                         }));
@@ -5126,7 +5423,7 @@ var PlaceRouter = /** @class */ (function (_super) {
                              * @param {?} session
                              * @return {?}
                              */
-                            function (session) { return session.onEnd(new NavigationEnd(-1, '', '')); }));
+                            function (session) { return session.onRouterEnd(new NavigationEnd(-1, '', '')); }));
                         }
                         return [7 /*endfinally*/];
                     case 4: return [2 /*return*/];
@@ -5134,12 +5431,16 @@ var PlaceRouter = /** @class */ (function (_super) {
             });
         });
     };
+    // @Trace()
+    // @Trace()
     /**
      * @protected
      * @param {?} transition
      * @return {?}
      */
-    PlaceRouter.prototype.runStateTransition = /**
+    PlaceRouter.prototype.runStateTransition = 
+    // @Trace()
+    /**
      * @protected
      * @param {?} transition
      * @return {?}
@@ -5196,7 +5497,7 @@ var PlaceRouter = /** @class */ (function (_super) {
      * @return {?}
      */
     function (url) {
-        return new UrlSnapshot(this.urlSerializer, url);
+        return new UrlSnapshot(this.urlSerializer, url, {});
     };
     /**
      * @param {?} url
@@ -5218,6 +5519,15 @@ var PlaceRouter = /** @class */ (function (_super) {
     function () {
         return this.router.routerState ? this.router.routerState.snapshot.url : null;
     };
+    /**
+     * @return {?}
+     */
+    PlaceRouter.prototype.getCurrentRouteSnapshot = /**
+     * @return {?}
+     */
+    function () {
+        return this.parseUrl(this.getCurrentRouterUrl());
+    };
     /**
      * @param {?} url
      * @return {?}
@@ -5244,14 +5554,32 @@ var PlaceRouter = /** @class */ (function (_super) {
     function (url) {
         return this.getActiveInteractionIdsFromUrl(url).length > 0;
     };
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} urlSnapshot
+     * @return {?}
+     */
+    PlaceRouter.prototype.navigateByUrl = 
+    // @Trace()
+    /**
+     * @param {?} urlSnapshot
+     * @return {?}
+     */
+    function (urlSnapshot) {
+        this.router.navigateByUrl(urlSnapshot.urlTree, urlSnapshot.getNavigationExtras());
+    };
+    // @Trace()
+    // @Trace()
     /**
      * @return {?}
      */
-    PlaceRouter.prototype.syncInteractionIdsWithRouter = /**
+    PlaceRouter.prototype.syncInteractionIdsWithRouter = 
+    // @Trace()
+    /**
      * @return {?}
      */
     function () {
-        var _a, _b;
         assert.isFalsey(this.navigationInProgress.value); // Updating interaction routes during an existing navigation breaks all the things.
         // Updating interaction routes during an existing navigation breaks all the things.
         /** @type {?} */
@@ -5261,22 +5589,12 @@ var PlaceRouter = /** @class */ (function (_super) {
         }
         else {
             if (currentIds.length < 1) {
-                this.router.navigate(['.', {
-                        outlets: (_a = {},
-                            _a[UrlSnapshot.INTERACTION_ROUTER_OUTLET] = null,
-                            _a)
-                    }], {
-                    replaceUrl: true // remove the interaction from the history.
-                });
+                // no more interactions to remove from history.
+                this.navigateByUrl(this.getCurrentRouteSnapshot().removeInteractionIds());
             }
             else {
-                /** @type {?} */
-                var urlSnapshot = this.parseUrl(this.getCurrentRouterUrl());
-                this.router.navigate(['.', {
-                        outlets: (_b = {},
-                            _b[UrlSnapshot.INTERACTION_ROUTER_OUTLET] = UrlSnapshot.createInteractionOutletRouterCommands(currentIds),
-                            _b)
-                    }]);
+                // todo was or is...
+                this.navigateByUrl(this.getCurrentRouteSnapshot().updateInteractionIds(currentIds));
             }
         }
     };
@@ -5294,12 +5612,6 @@ var PlaceRouter = /** @class */ (function (_super) {
         { type: InteractionService }
     ]; };
     /** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(UrlSerializer), ɵɵinject(Location), ɵɵinject(PlaceHistory), ɵɵinject(InteractionService)); }, token: PlaceRouter, providedIn: "root" });
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], PlaceRouter.prototype, "syncInteractionIdsWithRouter", null);
     return PlaceRouter;
 }(GarbageCollector));
 if (false) {
@@ -6865,139 +7177,42 @@ function Place(options) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var VisitSanitiser = /** @class */ (function () {
-    function VisitSanitiser(activatedRoute, router, placeHistory, injector) {
-        this.activatedRoute = activatedRoute;
-        this.router = router;
-        this.placeHistory = placeHistory;
-        this.injector = injector;
+/**
+ * This a work around for the fact that an activated route with multiple segments doesn't
+ * include the segment params in the paramMap as well as each segment returns an empty
+ * param map even when `parameter`s has content.
+ */
+var ConsolidatedParameterMap = /** @class */ (function () {
+    function ConsolidatedParameterMap(paramMap, urlSegments) {
+        this.paramMaps = [paramMap].concat((urlSegments || []).map((/**
+         * @param {?} s
+         * @return {?}
+         */
+        function (s) { return new ParamMapAdapter(s.parameters); }))).filter((/**
+         * @param {?} m
+         * @return {?}
+         */
+        function (m) { return !!m; })); // the activated route param map can be null
     }
-    // @Trace()
-    // @Trace()
     /**
-     * @param {?} visit
+     * @param {?} name
      * @return {?}
      */
-    VisitSanitiser.prototype.sanitise = 
-    // @Trace()
+    ConsolidatedParameterMap.prototype.get = /**
+     * @param {?} name
+     * @return {?}
+     */
+    function (name) {
+        /** @type {?} */
+        var paramMap = this.paramMaps.find((/**
+         * @param {?} m
+         * @return {?}
+         */
+        function (m) { return m.has(name); }));
+        return paramMap.get(name);
+    };
     /**
-     * @param {?} visit
-     * @return {?}
-     */
-    function (visit) {
-        return __awaiter(this, void 0, void 0, function () {
-            var placeDef, routeIdDef, routeId, sanitisedValue, parameterDefs, sanitisedVisit, i, def, value, sanitisedValue;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        placeDef = visit.placeDefinition;
-                        if (!placeDef.hasRouteId()) return [3 /*break*/, 2];
-                        routeIdDef = placeDef.getRouteIdParameterDef();
-                        routeId = visit.getRouteId();
-                        return [4 /*yield*/, routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector)];
-                    case 1:
-                        sanitisedValue = _a.sent();
-                        // console.log({routeId, sanitisedValue});
-                        // ###------- EARLY EXIT --------###
-                        if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
-                            // if the route id has changed we redirect immediately as other
-                            // parameter sanitisers might use it.
-                            return [2 /*return*/, visit.replace(routeIdDef, sanitisedValue)];
-                        }
-                        _a.label = 2;
-                    case 2:
-                        // if we didn't replace the routeId we continue the url present parameters.
-                        parameterDefs = placeDef.getVisitParameterDefs({
-                            includeRouteParameters: true,
-                            includeNonRouteParameters: true
-                        });
-                        sanitisedVisit = visit;
-                        i = 0;
-                        _a.label = 3;
-                    case 3:
-                        if (!(i < parameterDefs.length)) return [3 /*break*/, 6];
-                        def = parameterDefs[i];
-                        value = visit.getParameter(def.name);
-                        return [4 /*yield*/, def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector)];
-                    case 4:
-                        sanitisedValue = _a.sent();
-                        if (def.hasChanged(value, sanitisedValue)) {
-                            sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
-                        }
-                        _a.label = 5;
-                    case 5:
-                        i++;
-                        return [3 /*break*/, 3];
-                    case 6: return [2 /*return*/, sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit];
-                }
-            });
-        });
-    };
-    return VisitSanitiser;
-}());
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    VisitSanitiser.prototype.activatedRoute;
-    /**
-     * @type {?}
-     * @private
-     */
-    VisitSanitiser.prototype.router;
-    /**
-     * @type {?}
-     * @private
-     */
-    VisitSanitiser.prototype.placeHistory;
-    /**
-     * @type {?}
-     * @private
-     */
-    VisitSanitiser.prototype.injector;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * This a work around for the fact that an activated route with multiple segments doesn't
- * include the segment params in the paramMap as well as each segment returns an empty
- * param map even when `parameter`s has content.
- */
-var ConsolidatedParameterMap = /** @class */ (function () {
-    function ConsolidatedParameterMap(paramMap, urlSegments) {
-        this.paramMaps = [paramMap].concat((urlSegments || []).map((/**
-         * @param {?} s
-         * @return {?}
-         */
-        function (s) { return new ParamMapAdapter(s.parameters); }))).filter((/**
-         * @param {?} m
-         * @return {?}
-         */
-        function (m) { return !!m; })); // the activated route param map can be null
-    }
-    /**
-     * @param {?} name
-     * @return {?}
-     */
-    ConsolidatedParameterMap.prototype.get = /**
-     * @param {?} name
-     * @return {?}
-     */
-    function (name) {
-        /** @type {?} */
-        var paramMap = this.paramMaps.find((/**
-         * @param {?} m
-         * @return {?}
-         */
-        function (m) { return m.has(name); }));
-        return paramMap.get(name);
-    };
-    /**
-     * @param {?} name
+     * @param {?} name
      * @return {?}
      */
     ConsolidatedParameterMap.prototype.getAll = /**
@@ -7120,15 +7335,151 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+var NoopAuthGuard = /** @class */ (function () {
+    function NoopAuthGuard() {
+    }
+    /**
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @return {?}
+     */
+    NoopAuthGuard.prototype.canActivate = /**
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @return {?}
+     */
+    function (activatedRoute, state) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, true];
+            });
+        });
+    };
+    NoopAuthGuard.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    NoopAuthGuard.ctorParameters = function () { return []; };
+    /** @nocollapse */ NoopAuthGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function NoopAuthGuard_Factory() { return new NoopAuthGuard(); }, token: NoopAuthGuard, providedIn: "root" });
+    return NoopAuthGuard;
+}());
+
 /**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var VisitSanitiser = /** @class */ (function () {
+    function VisitSanitiser(activatedRoute, router, placeHistory, injector) {
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.placeHistory = placeHistory;
+        this.injector = injector;
+    }
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} visit
+     * @return {?}
+     */
+    VisitSanitiser.prototype.sanitise = 
+    // @Trace()
+    /**
+     * @param {?} visit
+     * @return {?}
+     */
+    function (visit) {
+        return __awaiter(this, void 0, void 0, function () {
+            var placeDef, routeIdDef, routeId, sanitisedValue, parameterDefs, sanitisedVisit, i, def, value, sanitisedValue;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        placeDef = visit.placeDefinition;
+                        if (!placeDef.hasRouteId()) return [3 /*break*/, 2];
+                        routeIdDef = placeDef.getRouteIdParameterDef();
+                        routeId = visit.getRouteId();
+                        return [4 /*yield*/, routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector)];
+                    case 1:
+                        sanitisedValue = _a.sent();
+                        // console.log({routeId, sanitisedValue});
+                        // ###------- EARLY EXIT --------###
+                        if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
+                            // if the route id has changed we redirect immediately as other
+                            // parameter sanitisers might use it.
+                            return [2 /*return*/, visit.replace(routeIdDef, sanitisedValue)];
+                        }
+                        _a.label = 2;
+                    case 2:
+                        // if we didn't replace the routeId we continue the url present parameters.
+                        parameterDefs = placeDef.getVisitParameterDefs({
+                            includeRouteParameters: true,
+                            includeNonRouteParameters: true
+                        });
+                        sanitisedVisit = visit;
+                        i = 0;
+                        _a.label = 3;
+                    case 3:
+                        if (!(i < parameterDefs.length)) return [3 /*break*/, 6];
+                        def = parameterDefs[i];
+                        value = visit.getParameter(def.name);
+                        return [4 /*yield*/, def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector)];
+                    case 4:
+                        sanitisedValue = _a.sent();
+                        if (def.hasChanged(value, sanitisedValue)) {
+                            sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
+                        }
+                        _a.label = 5;
+                    case 5:
+                        i++;
+                        return [3 /*break*/, 3];
+                    case 6: return [2 /*return*/, sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit];
+                }
+            });
+        });
+    };
+    return VisitSanitiser;
+}());
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    VisitSanitiser.prototype.activatedRoute;
+    /**
+     * @type {?}
+     * @private
+     */
+    VisitSanitiser.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    VisitSanitiser.prototype.placeHistory;
+    /**
+     * @type {?}
+     * @private
+     */
+    VisitSanitiser.prototype.injector;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @abstract
+ */
+var  /**
  * @abstract
  */
-var AbstractPlaceGuard = /** @class */ (function () {
-    function AbstractPlaceGuard(router, urlSerializer, placeRouter, placeHistory, injector) {
+PlaceGuard = /** @class */ (function () {
+    function PlaceGuard(router, urlSerializer, placeRouter, placeHistory, interactionService, injector) {
         this.router = router;
         this.urlSerializer = urlSerializer;
         this.placeRouter = placeRouter;
         this.placeHistory = placeHistory;
+        this.interactionService = interactionService;
         this.injector = injector;
     }
     // @Trace()
@@ -7138,7 +7489,7 @@ var AbstractPlaceGuard = /** @class */ (function () {
      * @param {?} state
      * @return {?}
      */
-    AbstractPlaceGuard.prototype.canActivate = 
+    PlaceGuard.prototype.canActivate = 
     // @Trace()
     /**
      * @param {?} activatedRoute
@@ -7149,44 +7500,59 @@ var AbstractPlaceGuard = /** @class */ (function () {
         return __awaiter(this, void 0, void 0, function () {
             var _this = this;
             return __generator(this, function (_a) {
+                // TODO: this is ugly now that I'm return UrlSnapshots and not UrlTrees.  It'd be better if the functions
+                //        weren't nested or if I implemented a handler chain.
                 return [2 /*return*/, this.authorisePlaceThen(activatedRoute, state, (/**
                      * @param {?} placeDefinition
                      * @return {?}
                      */
                     function (placeDefinition) { return __awaiter(_this, void 0, void 0, function () {
-                        var params, parsedParams, initialVisit, sanitiser, sanitisedVisit, commands;
+                        var result;
+                        var _this = this;
                         return __generator(this, function (_a) {
                             switch (_a.label) {
-                                case 0:
-                                    // Parse our route params.
-                                    params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
-                                    parsedParams = placeDefinition.parseRouteParams(params);
-                                    initialVisit = this.placeRouter.navigationState.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
-                                    sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
-                                    return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
+                                case 0: return [4 /*yield*/, this.cleanInteractionState(activatedRoute, state, (/**
+                                     * @return {?}
+                                     */
+                                    function () { return __awaiter(_this, void 0, void 0, function () {
+                                        var params, parsedParams, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
+                                        return __generator(this, function (_a) {
+                                            switch (_a.label) {
+                                                case 0:
+                                                    // Parse our route params.
+                                                    params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
+                                                    parsedParams = placeDefinition.parseRouteParams(params);
+                                                    initialVisit = this.placeRouter.navigationState.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
+                                                    sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
+                                                    return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
+                                                case 1:
+                                                    sanitisedVisit = _a.sent();
+                                                    // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
+                                                    this.placeRouter.navigationState.storeVisit(sanitisedVisit);
+                                                    if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
+                                                        // Regenerate the url
+                                                        urlSnapshot = this.placeRouter.parseUrl(state.url).updateVisitSegments(sanitisedVisit);
+                                                        console.log('##### Place Guard Redirect', urlSnapshot);
+                                                        return [2 /*return*/, urlSnapshot];
+                                                    }
+                                                    else {
+                                                        return [2 /*return*/, true];
+                                                    }
+                                                    return [2 /*return*/];
+                                            }
+                                        });
+                                    }); }))];
                                 case 1:
-                                    sanitisedVisit = _a.sent();
-                                    // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
-                                    this.placeRouter.navigationState.storeVisit(sanitisedVisit);
-                                    if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
-                                        // Regenerate the url
-                                        commands = this.placeRouter.parseUrl(state.url).createRedirectCommandsFor(sanitisedVisit);
-                                        console.log('##### Place Guard Redirect', commands);
-                                        return [2 /*return*/, this.router.createUrlTree(commands, {
-                                                replaceUrl: true,
-                                                skipLocationChange: false
-                                            })];
-                                    }
-                                    else {
-                                        return [2 /*return*/, true];
-                                    }
-                                    return [2 /*return*/];
+                                    result = _a.sent();
+                                    return [2 /*return*/, this.handleGuardResult(result)];
                             }
                         });
                     }); }))];
             });
         });
     };
+    // @Trace()
+    // @Trace()
     /**
      * @param {?} component
      * @param {?} currentRoute
@@ -7194,7 +7560,9 @@ var AbstractPlaceGuard = /** @class */ (function () {
      * @param {?=} nextState
      * @return {?}
      */
-    AbstractPlaceGuard.prototype.canDeactivate = /**
+    PlaceGuard.prototype.canDeactivate = 
+    // @Trace()
+    /**
      * @param {?} component
      * @param {?} currentRoute
      * @param {?} currentState
@@ -7203,11 +7571,38 @@ var AbstractPlaceGuard = /** @class */ (function () {
      */
     function (component, currentRoute, currentState, nextState) {
         return __awaiter(this, void 0, void 0, function () {
+            var currentUrl, nextUrl, result;
             return __generator(this, function (_a) {
-                return [2 /*return*/, this.placeRouter.navigationState.canDeactivatePlace(component, this.placeRouter.parseUrl(nextState.url))];
+                switch (_a.label) {
+                    case 0:
+                        currentUrl = this.placeRouter.parseUrl(currentState.url);
+                        nextUrl = this.placeRouter.parseUrl(nextState.url);
+                        return [4 /*yield*/, this.placeRouter.navigationState.canDeactivatePlace(component, currentUrl, nextUrl)];
+                    case 1:
+                        result = _a.sent();
+                        return [2 /*return*/, this.handleGuardResult(result)];
+                }
             });
         });
     };
+    /**
+     * @private
+     * @param {?} result
+     * @return {?}
+     */
+    PlaceGuard.prototype.handleGuardResult = /**
+     * @private
+     * @param {?} result
+     * @return {?}
+     */
+    function (result) {
+        if (result instanceof UrlSnapshot) {
+            return result.urlTree;
+        }
+        else {
+            return result;
+        }
+    };
     // @Trace()
     // @Trace()
     /**
@@ -7217,7 +7612,7 @@ var AbstractPlaceGuard = /** @class */ (function () {
      * @param {?} runPlaceGuards
      * @return {?}
      */
-    AbstractPlaceGuard.prototype.authorisePlaceThen = 
+    PlaceGuard.prototype.authorisePlaceThen = 
     // @Trace()
     /**
      * @protected
@@ -7259,12 +7654,16 @@ var AbstractPlaceGuard = /** @class */ (function () {
             });
         });
     };
+    // @Trace()
+    // @Trace()
     /**
      * @param {?} activatedRoute
      * @param {?} state
      * @return {?}
      */
-    AbstractPlaceGuard.prototype.isAuthorised = /**
+    PlaceGuard.prototype.isAuthorised = 
+    // @Trace()
+    /**
      * @param {?} activatedRoute
      * @param {?} state
      * @return {?}
@@ -7278,201 +7677,79 @@ var AbstractPlaceGuard = /** @class */ (function () {
             });
         });
     };
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [ActivatedRouteSnapshot, RouterStateSnapshot]),
-        __metadata("design:returntype", Promise)
-    ], AbstractPlaceGuard.prototype, "isAuthorised", null);
-    return AbstractPlaceGuard;
-}());
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractPlaceGuard.prototype.router;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractPlaceGuard.prototype.urlSerializer;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractPlaceGuard.prototype.placeRouter;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractPlaceGuard.prototype.placeHistory;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractPlaceGuard.prototype.injector;
-    /**
-     * @abstract
-     * @param {?} injector
-     * @return {?}
-     */
-    AbstractPlaceGuard.prototype.getAuthGuard = function (injector) { };
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var InteractionGuard = /** @class */ (function () {
-    function InteractionGuard(router, injector, placeRouter, angularLocation, interactionService) {
-        this.router = router;
-        this.injector = injector;
-        this.placeRouter = placeRouter;
-        this.angularLocation = angularLocation;
-        this.interactionService = interactionService;
-    }
+    // @Trace()
+    // @Trace()
     /**
      * @param {?} route
      * @param {?} state
+     * @param {?} then
      * @return {?}
      */
-    InteractionGuard.prototype.canActivate = /**
+    PlaceGuard.prototype.cleanInteractionState = 
+    // @Trace()
+    /**
      * @param {?} route
      * @param {?} state
+     * @param {?} then
      * @return {?}
      */
-    function (route, state) {
-        /** @type {?} */
-        var url = this.router.parseUrl(state.url);
-        if (!this.interactionService.isActive() && url.root.children[UrlSnapshot.INTERACTION_ROUTER_OUTLET]) {
-            // This happens if we reload the page or the url was pasted as the route should only be activated
-            // after the interaction context has become active.
-            delete url.root.children[UrlSnapshot.INTERACTION_ROUTER_OUTLET];
-            return url;
-        }
-        else {
-            return true;
-        }
-    };
-    /**
-     * @param {?} component
-     * @param {?} currentRoute
-     * @param {?} currentState
-     * @param {?=} nextState
-     * @return {?}
-     */
-    InteractionGuard.prototype.canDeactivate = /**
-     * @param {?} component
-     * @param {?} currentRoute
-     * @param {?} currentState
-     * @param {?=} nextState
-     * @return {?}
-     */
-    function (component, currentRoute, currentState, nextState) {
+    function (route, state, then) {
         return __awaiter(this, void 0, void 0, function () {
-            var currentIds, routeIds, activity;
+            var url;
             return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!this.interactionService.isActive()) return [3 /*break*/, 2];
-                        currentIds = this.interactionService.activeInteractionContextIds.value;
-                        routeIds = this.placeRouter.getActiveInteractionIdsFromUrl(nextState.url);
-                        if (!!isEqual(currentIds, routeIds)) return [3 /*break*/, 2];
-                        // The activity is still active so the route change was triggered by the back button.
-                        return [4 /*yield*/, this.interactionService.getCurrentActivity()];
-                    case 1:
-                        activity = _a.sent();
-                        activity.cancel();
-                        _a.label = 2;
-                    case 2: 
-                    // IMPORTANT:
-                    // We always return true, the router state engine will redirect as required.  Return false
-                    // during the guard causes all kinds of grief.  It might be worth trying a redirect here
-                    // again now that our state engine is more thorough.
-                    return [2 /*return*/, true];
+                url = this.placeRouter.parseUrl(state.url);
+                if (!this.interactionService.isActive() && url.hasInteractionIds()) {
+                    // This happens if we reload the page or the url was pasted as the route should only be activated
+                    // after the interaction context has become active.
+                    return [2 /*return*/, url.removeInteractionIds()];
                 }
+                else {
+                    return [2 /*return*/, then()];
+                }
+                return [2 /*return*/];
             });
         });
     };
-    InteractionGuard.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    InteractionGuard.ctorParameters = function () { return [
-        { type: Router },
-        { type: Injector },
-        { type: PlaceRouter },
-        { type: Location },
-        { type: InteractionService }
-    ]; };
-    /** @nocollapse */ InteractionGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function InteractionGuard_Factory() { return new InteractionGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(PlaceRouter), ɵɵinject(Location), ɵɵinject(InteractionService)); }, token: InteractionGuard, providedIn: "root" });
-    return InteractionGuard;
+    return PlaceGuard;
 }());
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    InteractionGuard.prototype.router;
+    PlaceGuard.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    InteractionGuard.prototype.injector;
+    PlaceGuard.prototype.urlSerializer;
     /**
      * @type {?}
      * @private
      */
-    InteractionGuard.prototype.placeRouter;
+    PlaceGuard.prototype.placeRouter;
     /**
      * @type {?}
      * @private
      */
-    InteractionGuard.prototype.angularLocation;
+    PlaceGuard.prototype.placeHistory;
     /**
      * @type {?}
      * @private
      */
-    InteractionGuard.prototype.interactionService;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var NoopAuthGuard = /** @class */ (function () {
-    function NoopAuthGuard() {
-    }
+    PlaceGuard.prototype.interactionService;
     /**
-     * @param {?} activatedRoute
-     * @param {?} state
-     * @return {?}
+     * @type {?}
+     * @private
      */
-    NoopAuthGuard.prototype.canActivate = /**
-     * @param {?} activatedRoute
-     * @param {?} state
+    PlaceGuard.prototype.injector;
+    /**
+     * @abstract
+     * @param {?} injector
      * @return {?}
      */
-    function (activatedRoute, state) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, true];
-            });
-        });
-    };
-    NoopAuthGuard.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    NoopAuthGuard.ctorParameters = function () { return []; };
-    /** @nocollapse */ NoopAuthGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function NoopAuthGuard_Factory() { return new NoopAuthGuard(); }, token: NoopAuthGuard, providedIn: "root" });
-    return NoopAuthGuard;
-}());
+    PlaceGuard.prototype.getAuthGuard = function (injector) { };
+}
 
 /**
  * @fileoverview added by tsickle
@@ -7754,5 +8031,5 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractActivity, AbstractInputComponent, AbstractPlaceGuard, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, FocusBindingDirective, Formatter, InplaceInteractionContextComponent, InteractionContext, InteractionContextBase, InteractionGuard, InteractionModule, InteractionOutletComponent, InteractionService, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, NavigationState, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, UrlSnapshot, Visit, VisitParameter, VisitParameterList, VisitSanitiser, leftRightPlaceAnimation, slideDownAndUpAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, InteractionModule as ɵba, ActivityContainerComponent as ɵbb, InteractionContextBase as ɵbc, InteractionContext as ɵbd, ActivityOutletComponent as ɵbe, ConfirmationDialogComponent as ɵbf, AbstractActivity as ɵbg, ACTIVITY_DATA as ɵbh, Activity as ɵbi, ConfirmThenDialogComponent as ɵbk, AlertDialogComponent as ɵbl, InteractionOutletComponent as ɵbn, InplaceInteractionContextComponent as ɵbo, FocusBindingDirective as ɵc, DisposableComponent as ɵd, ComponentsModule as ɵe, NumberInputComponent as ɵf, AbstractInputComponent as ɵg, StringInputComponent as ɵh, PasswordInputComponent as ɵi, SelectInputComponent as ɵj, NoopComponent as ɵk, PlaceModule as ɵl, EmptyStateComponent as ɵm, BusyOverlayComponent as ɵn, PlaceOutletComponent as ɵo, leftRightPlaceAnimation as ɵp, LEFT_RIGHT_PLACE_ANIMATION as ɵq, AUP_PLACE_CONFIG as ɵr, PlaceRouter as ɵt, PlaceHistory as ɵu, InteractionService as ɵv, ModalInteractionContextFactory as ɵw, TabbedPlaceNavigationComponent as ɵx, AbstractPlaceNavigationComponent as ɵy, ListPlaceNavComponent as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractActivity, AbstractInputComponent, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, FocusBindingDirective, Formatter, InplaceInteractionContextComponent, InteractionContext, InteractionContextBase, InteractionModule, InteractionOutletComponent, InteractionService, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, NavigationState, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, UrlSnapshot, Visit, VisitParameter, VisitParameterList, VisitSanitiser, leftRightPlaceAnimation, slideDownAndUpAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, InteractionModule as ɵba, ActivityContainerComponent as ɵbb, InteractionContextBase as ɵbc, InteractionContext as ɵbd, ActivityOutletComponent as ɵbe, ConfirmationDialogComponent as ɵbf, AbstractActivity as ɵbg, ACTIVITY_DATA as ɵbh, Activity as ɵbi, ConfirmThenDialogComponent as ɵbk, AlertDialogComponent as ɵbl, InteractionOutletComponent as ɵbn, InplaceInteractionContextComponent as ɵbo, FocusBindingDirective as ɵc, DisposableComponent as ɵd, ComponentsModule as ɵe, NumberInputComponent as ɵf, AbstractInputComponent as ɵg, StringInputComponent as ɵh, PasswordInputComponent as ɵi, SelectInputComponent as ɵj, NoopComponent as ɵk, PlaceModule as ɵl, EmptyStateComponent as ɵm, BusyOverlayComponent as ɵn, PlaceOutletComponent as ɵo, leftRightPlaceAnimation as ɵp, LEFT_RIGHT_PLACE_ANIMATION as ɵq, AUP_PLACE_CONFIG as ɵr, PlaceRouter as ɵt, PlaceHistory as ɵu, InteractionService as ɵv, ModalInteractionContextFactory as ɵw, TabbedPlaceNavigationComponent as ɵx, AbstractPlaceNavigationComponent as ɵy, ListPlaceNavComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map