@coolon/angular-ui-powerups 0.0.101 → 0.0.103

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@angular/router'), require('lodash'), require('@coolon/typescript-utilities'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill'), require('@angular/material/dialog'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/material/tabs', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@angular/router', 'lodash', '@coolon/typescript-utilities', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill', '@angular/material/dialog', 'rxjs'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.material.tabs, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.ng.router, global.___default, global.typescriptUtilities, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.ResizeObserver, global.ng.material.dialog, global.rxjs));
-}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, router, ___default, typescriptUtilities, icon, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, animations$1, ResizeObserver, dialog, rxjs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@angular/router'), require('@coolon/typescript-utilities'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('lodash'), require('@angular/animations'), require('resize-observer-polyfill'), require('@angular/material/dialog'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/material/tabs', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@angular/router', '@coolon/typescript-utilities', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', 'lodash', '@angular/animations', 'resize-observer-polyfill', '@angular/material/dialog', 'rxjs'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.material.tabs, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.ng.router, global.typescriptUtilities, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.___default, global.ng.animations, global.ResizeObserver, global.ng.material.dialog, global.rxjs));
+}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, router, typescriptUtilities, icon, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, ___default, animations$1, ResizeObserver, dialog, rxjs) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
@@ -1283,10 +1283,7 @@
     /**
      * @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;
@@ -1317,17 +1314,101 @@
             pectin.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 = pectin.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:
+                            pectin.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([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", Promise)
+        ], InteractionContext.prototype, "abort", null);
         return InteractionContext;
     }(pectin.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 () { };
@@ -1536,13 +1617,14 @@
              */
             _this._activityListDelegate = new pectin.DelegatingListModel();
             var _a = pectin.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(___default.last(activities));
+                    _this.deferredGetCurrentActivity.resolve(activity);
                     _this.deferredGetCurrentActivity = null;
                 }
             }));
@@ -1571,6 +1653,16 @@
             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.
@@ -1597,12 +1689,14 @@
                             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 = pectin.Deferred.defer();
                                 return [2 /*return*/, this.deferredGetCurrentActivity.promise];
                             }
                             else {
-                                return [2 /*return*/, ___default.last(this.activityList.value)];
+                                return [2 /*return*/, this._currentActivity.value];
                             }
                         }
                     }
@@ -1704,6 +1798,11 @@
          * @private
          */
         InteractionContextBase.prototype.deferredGetCurrentActivity;
+        /**
+         * @type {?}
+         * @private
+         */
+        InteractionContextBase.prototype._currentActivity;
         /**
          * @abstract
          * @protected
@@ -2130,6 +2229,7 @@
          * @return {?}
          */
         function () {
+            this.updateActivityList();
             this._initialActivityOutletContext.value = null;
             this.initialActivityOutletContextEvent.emit(null);
         };
@@ -2365,6 +2465,15 @@
         function () {
             return this.active.value;
         };
+        /**
+         * @return {?}
+         */
+        InteractionService.prototype.isModalActive = /**
+         * @return {?}
+         */
+        function () {
+            return this.modelInteractionActive.value;
+        };
         /**
          * @param {?} disposable
          * @return {?}
@@ -2390,19 +2499,19 @@
         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) {
-                    typescriptUtilities.assert.isTruthy(this.isActive());
-                    return [2 /*return*/, this._activeInteractionContext.value.getCurrentActivity()];
-                });
-            });
+            typescriptUtilities.assert.isTruthy(this.isActive());
+            return this._activeInteractionContext.value;
         };
         /**
          * Creates an interaction context that will prevent any other contexts from starting an
@@ -2704,25 +2813,6 @@
         InplaceInteractionContextComponent.prototype.interactionService;
     }
 
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var InteractionOutletComponent = /** @class */ (function () {
-        function InteractionOutletComponent() {
-        }
-        InteractionOutletComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'aup-interaction-outlet',
-                        template: "<router-outlet name=\"interaction-context\"></router-outlet>\n",
-                        styles: [":host{display:block}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        InteractionOutletComponent.ctorParameters = function () { return []; };
-        return InteractionOutletComponent;
-    }());
-
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -2746,13 +2836,11 @@
                             exports.ɵbk,
                             AlertDialogComponent,
                             ActivityOutletComponent,
-                            InteractionOutletComponent,
                             InplaceInteractionContextComponent
                         ],
                         exports: [
                             ActivityContainerComponent,
                             ActivityOutletComponent,
-                            InteractionOutletComponent,
                             InplaceInteractionContextComponent
                         ],
                         entryComponents: [
@@ -3735,67 +3823,110 @@
      * @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 (!!___default.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];
                     }
@@ -3829,7 +3960,9 @@
         /** @type {?} */
         PlaceComponentDeactivationHandler.prototype.component;
         /** @type {?} */
-        PlaceComponentDeactivationHandler.prototype.navigationSession;
+        PlaceComponentDeactivationHandler.prototype.navigationState;
+        /** @type {?} */
+        PlaceComponentDeactivationHandler.prototype.isPrimaryComponent;
     }
 
     /**
@@ -3850,6 +3983,16 @@
             _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 {?}
@@ -3912,6 +4055,19 @@
         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 {?}
@@ -3927,7 +4083,7 @@
          * @param {?} event
          * @return {?}
          */
-        NavigationState.prototype.onStart = /**
+        NavigationState.prototype.onRouterStarted = /**
          * @param {?} event
          * @return {?}
          */
@@ -3938,7 +4094,7 @@
          * @param {?} event
          * @return {?}
          */
-        NavigationState.prototype.onCancel = /**
+        NavigationState.prototype.onRouterCancelled = /**
          * @param {?} event
          * @return {?}
          */
@@ -3949,7 +4105,7 @@
          * @param {?} event
          * @return {?}
          */
-        NavigationState.prototype.onError = /**
+        NavigationState.prototype.onRouterError = /**
          * @param {?} event
          * @return {?}
          */
@@ -3960,7 +4116,7 @@
          * @param {?} event
          * @return {?}
          */
-        NavigationState.prototype.onEnd = /**
+        NavigationState.prototype.onRouterEnd = /**
          * @param {?} event
          * @return {?}
          */
@@ -3980,15 +4136,17 @@
         };
         /**
          * @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')];
@@ -4041,12 +4199,29 @@
          * @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
@@ -4057,12 +4232,7 @@
          * @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 {?}
@@ -4120,11 +4290,27 @@
                 _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 {?}
              */
@@ -4172,9 +4358,8 @@
          */
         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();
@@ -4207,7 +4392,7 @@
              * @param {?} event
              * @return {?}
              */
-            AbstractNavigationTransition.prototype.onStart = /**
+            AbstractNavigationTransition.prototype.onRouterStarted = /**
              * @param {?} event
              * @return {?}
              */
@@ -4220,7 +4405,7 @@
              * @param {?} event
              * @return {?}
              */
-            AbstractNavigationTransition.prototype.onEnd = /**
+            AbstractNavigationTransition.prototype.onRouterEnd = /**
              * @param {?} event
              * @return {?}
              */
@@ -4238,37 +4423,38 @@
              * @return {?}
              */
             function (locationTriggerUrl) {
-                // detach the interactoin from the session so it doesn't get disposed until the activity
-                // has completed.
+                pectin.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 = pectin.Dsl.disposeWith(context).when;
+                var navigationInteraction = this.detachInteractionContext();
+                var when = pectin.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) {
@@ -4276,10 +4462,10 @@
                         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)];
                     });
                 });
             };
@@ -4314,8 +4500,6 @@
              */
             AbstractNavigationTransition.prototype._interactionContext;
             /** @type {?} */
-            AbstractNavigationTransition.prototype.isPopState;
-            /** @type {?} */
             AbstractNavigationTransition.prototype.startingUrl;
         }
         var NavigationTransition = /** @class */ (function (_super) {
@@ -4329,44 +4513,18 @@
              * @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 {?}
              */
@@ -4390,9 +4548,9 @@
             /** @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;
@@ -4401,7 +4559,7 @@
              * @param {?} event
              * @return {?}
              */
-            NavigationBackTransition.prototype.onCancel = /**
+            PopStateTransition.prototype.onRouterCancelled = /**
              * @param {?} event
              * @return {?}
              */
@@ -4416,7 +4574,7 @@
              * @param {?} event
              * @return {?}
              */
-            NavigationBackTransition.prototype.onError = /**
+            PopStateTransition.prototype.onRouterError = /**
              * @param {?} event
              * @return {?}
              */
@@ -4430,90 +4588,105 @@
                 }
                 return new Idle(this.context);
             };
-            return NavigationBackTransition;
+            return PopStateTransition;
         }(AbstractNavigationTransition));
-        NavigationState.NavigationBackTransition = NavigationBackTransition;
+        NavigationState.PopStateTransition = PopStateTransition;
         if (false) {
             /** @type {?} */
-            NavigationBackTransition.prototype.isPopState;
+            PopStateTransition.prototype.isPopState;
         }
-        /**
-         * @abstract
-         */
-        var /**
-         * @abstract
-         */
-        AbstractInteractionTransition = /** @class */ (function (_super) {
-            __extends(AbstractInteractionTransition, _super);
-            function AbstractInteractionTransition(context, startingUrl) {
+        var IdleDuringInteraction = /** @class */ (function (_super) {
+            __extends(IdleDuringInteraction, _super);
+            function IdleDuringInteraction(context, startingUrl) {
                 var _this = _super.call(this, context) || this;
                 _this.startingUrl = startingUrl;
-                _this.isTransitional = true;
+                _this.isTransitional = false;
+                _this.isPopState = false;
                 return _this;
             }
             /**
-             * @protected
+             * @param {?} visit
+             * @param {?} initialUrl
              * @return {?}
              */
-            AbstractInteractionTransition.prototype.reinstateInteractionRoute = /**
-             * @protected
+            IdleDuringInteraction.prototype.onPlaceNavigationStart = /**
+             * @param {?} visit
+             * @param {?} initialUrl
              * @return {?}
              */
-            function () {
-                var _this = this;
-                console.log(this.startingUrl);
-                setTimeout((/**
-                 * @return {?}
-                 */
-                function () { return _this.placeRouter.syncInteractionIdsWithRouter(); }));
+            function (visit, initialUrl) {
+                /** @type {?} */
+                var navigationTransition = new InteractionTransition(this.context, initialUrl);
+                navigationTransition.storeVisit(visit);
+                return navigationTransition;
             };
-            return AbstractInteractionTransition;
-        }(NavigationState));
-        NavigationState.AbstractInteractionTransition = AbstractInteractionTransition;
-        if (false) {
-            /** @type {?} */
-            AbstractInteractionTransition.prototype.isTransitional;
-            /** @type {?} */
-            AbstractInteractionTransition.prototype.startingUrl;
-        }
-        /**
-         * 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.
-         */
-        InteractionTransition = /** @class */ (function (_super) {
-            __extends(InteractionTransition, _super);
-            function InteractionTransition() {
-                var _this = _super !== null && _super.apply(this, arguments) || this;
-                _this.isPopState = false;
-                return _this;
-            }
             /**
              * @param {?} event
              * @return {?}
              */
-            InteractionTransition.prototype.onEnd = /**
+            IdleDuringInteraction.prototype.onRouterStarted = /**
              * @param {?} event
              * @return {?}
              */
             function (event) {
-                if (this.context.interactionService.isActive()) {
-                    this.reinstateInteractionRoute();
-                    return new IdleDuringInteraction(this.context, this.startingUrl);
-                }
-                else {
-                    return new Idle(this.context);
-                }
+                return new InteractionTransition(this.context, event.url);
             };
-            return InteractionTransition;
-        }(AbstractInteractionTransition));
-        NavigationState.InteractionTransition = InteractionTransition;
+            /**
+             * @param {?} event
+             * @return {?}
+             */
+            IdleDuringInteraction.prototype.onPopState = /**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                return new InteractionPopStateTransition(this.context, event.url);
+            };
+            __decorate([
+                pectin.Trace(),
+                __metadata("design:type", Function),
+                __metadata("design:paramtypes", [router.NavigationStart]),
+                __metadata("design:returntype", NavigationState)
+            ], IdleDuringInteraction.prototype, "onRouterStarted", null);
+            __decorate([
+                pectin.Trace(),
+                __metadata("design:type", Function),
+                __metadata("design:paramtypes", [router.NavigationStart]),
+                __metadata("design:returntype", NavigationState)
+            ], IdleDuringInteraction.prototype, "onPopState", null);
+            return IdleDuringInteraction;
+        }(NavigationState));
+        NavigationState.IdleDuringInteraction = IdleDuringInteraction;
         if (false) {
             /** @type {?} */
-            InteractionTransition.prototype.isPopState;
+            IdleDuringInteraction.prototype.isTransitional;
+            /** @type {?} */
+            IdleDuringInteraction.prototype.isPopState;
+            /** @type {?} */
+            IdleDuringInteraction.prototype.startingUrl;
+        }
+        /**
+         * @abstract
+         */
+        var /**
+         * @abstract
+         */
+        AbstractInteractionTransition = /** @class */ (function (_super) {
+            __extends(AbstractInteractionTransition, _super);
+            function AbstractInteractionTransition(context, startingUrl) {
+                var _this = _super.call(this, context, startingUrl) || this;
+                _this.startingUrl = startingUrl;
+                _this.isTransitional = true;
+                return _this;
+            }
+            return AbstractInteractionTransition;
+        }(AbstractNavigationTransition));
+        NavigationState.AbstractInteractionTransition = AbstractInteractionTransition;
+        if (false) {
+            /** @type {?} */
+            AbstractInteractionTransition.prototype.isTransitional;
+            /** @type {?} */
+            AbstractInteractionTransition.prototype.startingUrl;
         }
         /**
          * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
@@ -4523,87 +4696,133 @@
          * 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() {
+        InteractionTransition = /** @class */ (function (_super) {
+            __extends(InteractionTransition, _super);
+            function InteractionTransition() {
                 var _this = _super !== null && _super.apply(this, arguments) || this;
-                _this.isPopState = true;
+                _this.isPopState = false;
                 return _this;
             }
             /**
              * @param {?} event
              * @return {?}
              */
-            InteractionBackTransition.prototype.onEnd = /**
+            InteractionTransition.prototype.onRouterCancelled = /**
              * @param {?} event
              * @return {?}
              */
             function (event) {
-                if (this.interactionService.isActive()) {
-                    this.reinstateInteractionRoute();
+                if (this.context.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 {?}
+             */
+            InteractionTransition.prototype.onRouterError = /**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
+                // 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", {
@@ -4611,7 +4830,7 @@
                  * @return {?}
                  */
                 function () {
-                    return !this.capturedFauxRouterStart;
+                    return true;
                 },
                 enumerable: true,
                 configurable: true
@@ -4620,35 +4839,34 @@
              * @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 {?}
              */
@@ -4659,7 +4877,7 @@
              * @param {?} event
              * @return {?}
              */
-            CancelledDuringNavigationInteraction.prototype.onError = /**
+            CancelledDuringNavigationInteraction.prototype.onRouterError = /**
              * @param {?} event
              * @return {?}
              */
@@ -4675,7 +4893,31 @@
              * @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
@@ -4688,7 +4930,7 @@
              * @return {?}
              */
             function (event, reason) {
-                reason = reason ? " (" + reason + ")" : '';
+                reason = reason ? " -> " + reason : '';
                 pectin.Logger.get(this).info("ignoring router event" + reason + ": " + event.constructor.name + " -> " + event.url);
                 return this;
             };
@@ -4699,8 +4941,14 @@
              * @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([
+                pectin.Trace(),
+                __metadata("design:type", Function),
+                __metadata("design:paramtypes", [router.NavigationCancel]),
+                __metadata("design:returntype", NavigationState)
+            ], CancelledDuringNavigationInteraction.prototype, "onRouterCancelled", null);
             return CancelledDuringNavigationInteraction;
         }(NavigationState));
         NavigationState.CancelledDuringNavigationInteraction = CancelledDuringNavigationInteraction;
@@ -4711,10 +4959,12 @@
              * @type {?}
              * @private
              */
-            CancelledDuringNavigationInteraction.prototype.capturedFauxRouterStart;
+            CancelledDuringNavigationInteraction.prototype.gotPopStateWithLeavingUrl;
             /** @type {?} */
             CancelledDuringNavigationInteraction.prototype.startingUrl;
             /** @type {?} */
+            CancelledDuringNavigationInteraction.prototype.startingEventWasAPopState;
+            /** @type {?} */
             CancelledDuringNavigationInteraction.prototype.locationChangeTriggerUrl;
         }
     })(exports.NavigationState || (exports.NavigationState = {}));
@@ -4805,25 +5055,26 @@
      */
     exports.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 {?} */
@@ -4834,17 +5085,20 @@
             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;
         };
         /**
@@ -4877,31 +5131,6 @@
                         new router.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 {?}
@@ -4911,7 +5140,7 @@
          * @return {?}
          */
         function (placeDef) {
-            return this.getPrimarySegments().find((/**
+            return this.getPrimarySegments(this.urlTree).find((/**
              * @param {?} s
              * @return {?}
              */
@@ -4925,53 +5154,101 @@
          */
         function () {
             /** @type {?} */
-            var interactionOutlet = this.urlTree.root.children[UrlSnapshot.INTERACTION_ROUTER_OUTLET];
-            if (interactionOutlet) {
-                pectin.assert.isTruthy(interactionOutlet.segments.length === 2);
-                pectin.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 router.UrlSegmentGroup([
-                new router.UrlSegment(UrlSnapshot.INTERACTION_ROUTER_PATH, {}),
-                new router.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 {?} */
         exports.UrlSnapshot.prototype.urlTree;
         /** @type {?} */
         exports.UrlSnapshot.prototype.urlSerializer;
         /** @type {?} */
         exports.UrlSnapshot.prototype.url;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.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
@@ -4990,13 +5267,14 @@
         }
         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;
     })(exports.UrlSnapshot || (exports.UrlSnapshot = {}));
 
     /**
@@ -5043,7 +5321,6 @@
                 // NavigationStart -> .... -> NavigationError --> navigation aborted, end session.
                 // =======================
                 if (event instanceof router.NavigationStart) {
-                    console.log(event);
                     if (event.navigationTrigger === 'popstate') {
                         _this.runStateTransition((/**
                          * @param {?} state
@@ -5056,7 +5333,7 @@
                          * @param {?} state
                          * @return {?}
                          */
-                        function (state) { return state.onStart(event); }));
+                        function (state) { return state.onRouterStarted(event); }));
                     }
                 }
                 if (event instanceof router.NavigationEnd) {
@@ -5065,7 +5342,7 @@
                      * @param {?} state
                      * @return {?}
                      */
-                    function (state) { return state.onEnd(event); }));
+                    function (state) { return state.onRouterEnd(event); }));
                 }
                 if (event instanceof router.NavigationError) {
                     console.log(event);
@@ -5073,7 +5350,7 @@
                      * @param {?} state
                      * @return {?}
                      */
-                    function (state) { return state.onError(event); }));
+                    function (state) { return state.onRouterError(event); }));
                 }
                 if (event instanceof router.NavigationCancel) {
                     console.log(event);
@@ -5081,7 +5358,7 @@
                      * @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.
@@ -5110,12 +5387,11 @@
                 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 exports.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()) {
-                        pectin.Logger.get(_this).info("back button pressed during navigation session interaction promise");
                         _this.runStateTransition((/**
                          * @param {?} state
                          * @return {?}
@@ -5256,9 +5532,9 @@
                              */
                             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*/];
@@ -5290,7 +5566,7 @@
                              */
                             function (current) {
                                 /** @type {?} */
-                                var session = new exports.NavigationState.NavigationTransition(_this._navigationSessionContext, false, _this.router.routerState.snapshot.url);
+                                var session = _this.navigationState.onPlaceNavigationStart(visit, _this.getCurrentRouterUrl());
                                 session.storeVisit(visit);
                                 return session;
                             }));
@@ -5309,7 +5585,7 @@
                                  * @param {?} session
                                  * @return {?}
                                  */
-                                function (session) { return session.onEnd(new router.NavigationEnd(-1, '', '')); }));
+                                function (session) { return session.onRouterEnd(new router.NavigationEnd(-1, '', '')); }));
                             }
                             return [7 /*endfinally*/];
                         case 4: return [2 /*return*/];
@@ -5317,12 +5593,16 @@
                 });
             });
         };
+        // @Trace()
+        // @Trace()
         /**
          * @protected
          * @param {?} transition
          * @return {?}
          */
-        PlaceRouter.prototype.runStateTransition = /**
+        PlaceRouter.prototype.runStateTransition = 
+        // @Trace()
+        /**
          * @protected
          * @param {?} transition
          * @return {?}
@@ -5379,7 +5659,7 @@
          * @return {?}
          */
         function (url) {
-            return new exports.UrlSnapshot(this.urlSerializer, url);
+            return new exports.UrlSnapshot(this.urlSerializer, url, {});
         };
         /**
          * @param {?} url
@@ -5401,6 +5681,15 @@
         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 {?}
@@ -5427,14 +5716,32 @@
         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;
             pectin.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 {?} */
@@ -5444,22 +5751,12 @@
             }
             else {
                 if (currentIds.length < 1) {
-                    this.router.navigate(['.', {
-                            outlets: (_a = {},
-                                _a[exports.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[exports.UrlSnapshot.INTERACTION_ROUTER_OUTLET] = exports.UrlSnapshot.createInteractionOutletRouterCommands(currentIds),
-                                _b)
-                        }]);
+                    // todo was or is...
+                    this.navigateByUrl(this.getCurrentRouteSnapshot().updateInteractionIds(currentIds));
                 }
             }
         };
@@ -5477,12 +5774,6 @@
             { type: exports.ɵv }
         ]; };
         /** @nocollapse */ PlaceRouter.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(router.UrlSerializer), core.ɵɵinject(common.Location), core.ɵɵinject(PlaceHistory), core.ɵɵinject(exports.ɵv)); }, token: PlaceRouter, providedIn: "root" });
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], PlaceRouter.prototype, "syncInteractionIdsWithRouter", null);
         return PlaceRouter;
     }(pectin.GarbageCollector));
     if (false) {
@@ -7013,7 +7304,7 @@
          */
         function (target) {
             if (exports.PlaceComponent.isPlaceComponentConstructor(target)) {
-                exports.PlaceComponent.injectDefinition(target, new exports.PlaceDefinition(target, options.path, ___default.isNil(options.authenticate) ? false : options.authenticate, options.data, exports.PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
+                exports.PlaceComponent.injectDefinition(target, new exports.PlaceDefinition(target, options.path, ___default.isNil(options.authenticate) ? true : options.authenticate, options.data, exports.PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
                  * @param {?} c
                  * @return {?}
                  */
@@ -7044,103 +7335,6 @@
         }
     })(Place || (Place = {}));
 
-    /**
-     * @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
@@ -7303,15 +7497,151 @@
      * @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: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        NoopAuthGuard.ctorParameters = function () { return []; };
+        /** @nocollapse */ NoopAuthGuard.ngInjectableDef = core.ɵɵ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()
@@ -7321,7 +7651,7 @@
          * @param {?} state
          * @return {?}
          */
-        AbstractPlaceGuard.prototype.canActivate = 
+        PlaceGuard.prototype.canActivate = 
         // @Trace()
         /**
          * @param {?} activatedRoute
@@ -7332,44 +7662,59 @@
             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
@@ -7377,7 +7722,9 @@
          * @param {?=} nextState
          * @return {?}
          */
-        AbstractPlaceGuard.prototype.canDeactivate = /**
+        PlaceGuard.prototype.canDeactivate = 
+        // @Trace()
+        /**
          * @param {?} component
          * @param {?} currentRoute
          * @param {?} currentState
@@ -7386,11 +7733,38 @@
          */
         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 exports.UrlSnapshot) {
+                return result.urlTree;
+            }
+            else {
+                return result;
+            }
+        };
         // @Trace()
         // @Trace()
         /**
@@ -7400,7 +7774,7 @@
          * @param {?} runPlaceGuards
          * @return {?}
          */
-        AbstractPlaceGuard.prototype.authorisePlaceThen = 
+        PlaceGuard.prototype.authorisePlaceThen = 
         // @Trace()
         /**
          * @protected
@@ -7442,12 +7816,16 @@
                 });
             });
         };
+        // @Trace()
+        // @Trace()
         /**
          * @param {?} activatedRoute
          * @param {?} state
          * @return {?}
          */
-        AbstractPlaceGuard.prototype.isAuthorised = /**
+        PlaceGuard.prototype.isAuthorised = 
+        // @Trace()
+        /**
          * @param {?} activatedRoute
          * @param {?} state
          * @return {?}
@@ -7461,201 +7839,79 @@
                 });
             });
         };
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [router.ActivatedRouteSnapshot, router.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[exports.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[exports.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 (!!___default.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: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        InteractionGuard.ctorParameters = function () { return [
-            { type: router.Router },
-            { type: core.Injector },
-            { type: PlaceRouter },
-            { type: common.Location },
-            { type: exports.ɵv }
-        ]; };
-        /** @nocollapse */ InteractionGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function InteractionGuard_Factory() { return new InteractionGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(PlaceRouter), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵv)); }, 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: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        NoopAuthGuard.ctorParameters = function () { return []; };
-        /** @nocollapse */ NoopAuthGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function NoopAuthGuard_Factory() { return new NoopAuthGuard(); }, token: NoopAuthGuard, providedIn: "root" });
-        return NoopAuthGuard;
-    }());
+        PlaceGuard.prototype.getAuthGuard = function (injector) { };
+    }
 
     /**
      * @fileoverview added by tsickle
@@ -7921,7 +8177,6 @@
     exports.AUP_PLACE_CONFIG = AUP_PLACE_CONFIG;
     exports.AbstractActivity = AbstractActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
-    exports.AbstractPlaceGuard = AbstractPlaceGuard;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
     exports.Activity = exports.ɵbi;
     exports.ActivityContainerComponent = ActivityContainerComponent;
@@ -7946,9 +8201,7 @@
     exports.InplaceInteractionContextComponent = InplaceInteractionContextComponent;
     exports.InteractionContext = InteractionContext;
     exports.InteractionContextBase = InteractionContextBase;
-    exports.InteractionGuard = InteractionGuard;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionOutletComponent = InteractionOutletComponent;
     exports.InteractionService = exports.ɵv;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
@@ -7959,6 +8212,7 @@
     exports.PasswordInputComponent = PasswordInputComponent;
     exports.Place = Place;
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
+    exports.PlaceGuard = PlaceGuard;
     exports.PlaceHistory = PlaceHistory;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
@@ -7987,8 +8241,7 @@
     exports.ɵbg = AbstractActivity;
     exports.ɵbh = ACTIVITY_DATA;
     exports.ɵbl = AlertDialogComponent;
-    exports.ɵbn = InteractionOutletComponent;
-    exports.ɵbo = InplaceInteractionContextComponent;
+    exports.ɵbn = InplaceInteractionContextComponent;
     exports.ɵc = FocusBindingDirective;
     exports.ɵd = DisposableComponent;
     exports.ɵe = ComponentsModule;