@coolon/angular-ui-powerups 0.0.125 → 0.0.128

package/esm5/lib/place/place-router.js

@@ -5,47 +5,72 @@
 import * as tslib_1 from "tslib";
 import { Location } from '@angular/common';
 import { Injectable } from '@angular/core';
-import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router, UrlSerializer } from '@angular/router';
-import { assert, Dsl, GarbageCollector, lang, Logger, MutableListModel, MutableStream, MutableValueModel } from '@coolon/pectin';
-import _ from 'lodash';
+import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
+import { assert, DebugContext, Dsl, GarbageCollector, lang, Logger, MutableListModel, MutableValueModel } from '@coolon/pectin';
 import { InteractionService } from '../interaction/services/interaction.service';
-import { NavigationState } from './guards/navigation-state';
+import { NavigatingDuringInteraction } from './navigation/session/interactions/navigating-during-interaction';
+import { PopStateDuringInteractionNavigation } from './navigation/session/interactions/pop-state-during-interaction-navigation';
+import { SynchroniseInteractionContextIdsWithRoute } from './navigation/session/interactions/synchronise-interaction-context-ids-with-route';
+import { Navigating } from './navigation/session/navigating';
+import { NavigationContext } from './navigation/session/navigation-context';
+import { PopStateNavigation } from './navigation/session/pop-state-navigation';
 import { PlaceHistory } from './place-history';
-import { UrlSnapshot } from './url-snapshot';
+import { UrlService } from './url-service';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
 import * as i2 from "@angular/common";
-import * as i3 from "./place-history";
-import * as i4 from "../interaction/services/interaction.service";
+import * as i3 from "../interaction/services/interaction.service";
+import * as i4 from "./url-service";
+import * as i5 from "./place-history";
 var PlaceRouter = /** @class */ (function (_super) {
     tslib_1.__extends(PlaceRouter, _super);
-    function PlaceRouter(router, urlSerializer, angularLocation, placeHistory, interactionService) {
+    function PlaceRouter(angularRouter, angularLocation, interactionService, urlService, placeHistory) {
         var _this = _super.call(this) || this;
-        _this.router = router;
-        _this.urlSerializer = urlSerializer;
+        _this.angularRouter = angularRouter;
         _this.angularLocation = angularLocation;
-        _this.placeHistory = placeHistory;
         _this.interactionService = interactionService;
-        _this._navigationStateModel = new MutableValueModel();
+        _this.urlService = urlService;
+        _this.placeHistory = placeHistory;
+        _this.navigationSessionModel = new MutableValueModel();
         _this._activeVisits = new MutableListModel();
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        _this.activeVisitIndex = chain(_this._activeVisits).indexBy('placeDefinition');
-        _this.navigationInProgress = chain(_this.navigationStateModel).pluck('isTransitional');
-        _this._navigationSessionContext = new NavigationState.Context(_this, _this.interactionService, (/**
-         * @param {?} session
+        _this.sessionFinishedJobs = [];
+        _this.routerInteractionAdapter = interactionService.registerPlaceRouter(_this);
+        // TODO: Make this an interface and use 'this' instead.
+        _this.navigationContext = new NavigationContext.Impl(_this.urlService, _this.routerInteractionAdapter, (/**
+         * @param {?} urlSnapshot
+         * @param {?} options
          * @return {?}
          */
-        function (session) {
-            _this.processNavigationSuccess(session);
-        }));
-        _this._navigationStateModel.value = new NavigationState.Idle(_this._navigationSessionContext);
-        _this._navigationStateTypeModel = chain(_this._navigationStateModel).map((/**
+        function (urlSnapshot, options) {
+            return _this.navigateByUrl(urlSnapshot, options);
+        }), (/**
          * @param {?} state
          * @return {?}
          */
-        function (state) { return (/** @type {?} */ (state.constructor)); }));
+        function (state) {
+            _this.transitionTo(state);
+        }), (/**
+         * @param {?} visits
+         * @return {?}
+         */
+        function (visits) {
+            _this.routingSessionFinished(visits);
+        }));
+        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        _this.navigationInProgress = chain(_this.navigationSessionModel).isNotNil();
+        /** @type {?} */
+        var idleStateName = chain(_this.interactionService.active).map((/**
+         * @param {?} active
+         * @return {?}
+         */
+        function (active) { return active ? 'IdleDuringInteraction' : 'Idle'; }));
+        _this.navigationSessionName = chain(_this.navigationSessionModel)
+            .pluck('name')
+            .otherwise(idleStateName);
+        DebugContext.tag(_this._activeVisits, "PlaceRouter.activeVisits");
+        _this.activeVisitsByPlaceDefinition = chain(_this._activeVisits).indexBy('placeDefinition');
         // TODO: make setup the callbacks in during module initiation to make this testable.
-        _this.router.events.subscribe((/**
+        angularRouter.events.subscribe((/**
          * @param {?} event
          * @return {?}
          */
@@ -57,271 +82,252 @@ var PlaceRouter = /** @class */ (function (_super) {
             // NavigationStart -> .... -> NavigationError --> navigation aborted, end session.
             // =======================
             if (event instanceof NavigationStart) {
+                // console.log(`---> NavigationStart[${event.id}]: ${event.url} (${event.navigationTrigger})`);
                 if (event.navigationTrigger === 'popstate') {
-                    _this.runStateTransition((/**
-                     * @param {?} state
-                     * @return {?}
-                     */
-                    function (state) { return state.onPopState(event); }));
+                    _this.onPopState(event);
                 }
                 else {
-                    _this.runStateTransition((/**
-                     * @param {?} state
-                     * @return {?}
-                     */
-                    function (state) { return state.onRouterStarted(event); }));
+                    _this.onRouterStarted(event);
                 }
+                // console.log(`<--- NavigationStart[${event.id}]: ${event.url} (${event.navigationTrigger})`);
             }
             if (event instanceof NavigationEnd) {
-                console.log(event);
-                _this.runStateTransition((/**
-                 * @param {?} state
-                 * @return {?}
-                 */
-                function (state) { return state.onRouterEnd(event); }));
+                // console.log(`---> NavigationEnd[${event.id}]: ${event.url}`);
+                _this.onRouterEnd(event);
+                // console.log(`<--- NavigationEnd[${event.id}]: ${event.url}`);
             }
             if (event instanceof NavigationError) {
-                console.log(event);
-                _this.runStateTransition((/**
-                 * @param {?} state
-                 * @return {?}
-                 */
-                function (state) { return state.onRouterError(event); }));
+                // console.log(`---> NavigationError[${event.id}]: ${event.url}`);
+                _this.onRouterError(event);
+                // console.log(`<--- NavigationError[${event.id}]: ${event.url}`);
             }
             if (event instanceof NavigationCancel) {
-                console.log(event);
-                _this.runStateTransition((/**
-                 * @param {?} state
-                 * @return {?}
-                 */
-                function (state) { return state.onRouterCancelled(event); }));
+                // console.log(`---> NavigationCancel[${event.id}]: ${event.url}`);
+                _this.onRouterCancelled(event);
+                // console.log(`<--- NavigationCancel[${event.id}]: ${event.url}`);
             }
         }));
-        // Push dialog state to the url so we can capture the back button.
-        when.listOf(_this.interactionService.activeInteractionContextIds).changes((/**
-         * @param {?} ids
-         * @param {?} previous
-         * @return {?}
-         */
-        function (ids, previous) {
-            _this.syncInteractionIdsWithRouter(ids, previous);
-        }), { unless: _this.navigationInProgress }); // TODO: I think the exclusive interaction prevents interactions starting while it's active so we might not need this.
-        // TODO: I think the exclusive interaction prevents interactions starting while it's active so we might not need this.
-        /** @type {?} */
-        var urlChanges = new MutableStream();
-        // The angular router doesn't always fire router events when the back button is pushed while a navigation
-        // session is in progress.  Sometimes we only know about it from the url change.
-        // IMPORTANT ORDER DEPENDENCY
-        // This only works because we're notified of the change after the router has started reacting to it.  This
-        // we can can use our navigationState to determine things.
+        // The router needs to know about url changes and in some cases they are the only way the router can know if
+        // the back button was clicked.
         angularLocation.onUrlChange((/**
          * @param {?} url
          * @return {?}
          */
-        function (url) {
-            /** @type {?} */
-            var navigationState = _this._navigationStateModel.value;
-            console.log("URLChange -> " + url, { state: navigationState });
-            urlChanges.publish({ url: url, state: navigationState });
-            // The url has changed while we're in a transitional state
-            if (navigationState.isTransitional) {
-                /** @type {?} */
-                var navigationInteraction = _this.navigationState.interactionContext;
-                if (navigationInteraction && navigationInteraction.isActive()) {
-                    _this.runStateTransition((/**
-                     * @param {?} state
-                     * @return {?}
-                     */
-                    function (state) { return state.onBackClickedDuringNavigationInteraction(url); }));
-                }
-            }
-        }));
+        function (url) { return _this.onUrlChanged(url); }));
         return _this;
     }
-    /**
-     * @private
-     * @param {?} session
-     * @return {?}
-     */
-    PlaceRouter.prototype.processNavigationSuccess = /**
-     * @private
-     * @param {?} session
-     * @return {?}
-     */
-    function (session) {
-        var _this = this;
-        // We need to update the visits before the session finishes.  This allows the placeOutets to ignore visit
-        // changes that occur while routerNavigationActive is true.
-        assert.isTruthy(this.navigationInProgress.value);
-        /** @type {?} */
-        var visits = session.getVisits();
-        visits.forEach((/**
-         * @param {?} v
-         * @return {?}
-         */
-        function (v) { return _this.placeHistory.add(v); }));
-        this._activeVisits.value = visits;
-    };
-    Object.defineProperty(PlaceRouter.prototype, "navigationState", {
+    Object.defineProperty(PlaceRouter.prototype, "navigationSession", {
         get: /**
          * @return {?}
          */
         function () {
-            return this._navigationStateModel.value;
+            return this.navigationSessionModel.value;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(PlaceRouter.prototype, "navigationStateModel", {
+    Object.defineProperty(PlaceRouter.prototype, "currentSession", {
         get: /**
          * @return {?}
          */
         function () {
-            return this._navigationStateModel.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PlaceRouter.prototype, "activeVisits", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this._activeVisits.readonly;
+            return this.navigationSessionModel.value;
         },
         enumerable: true,
         configurable: true
     });
+    // @Trace()
+    // @Trace()
     /**
-     *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
-     * @param visit
+     * @param {?} event
+     * @return {?}
      */
+    PlaceRouter.prototype.onPopState = 
+    // @Trace()
     /**
-     *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
-     * @param {?} visit
-     * @param {?=} options
+     * @param {?} event
      * @return {?}
      */
-    PlaceRouter.prototype.navigate = /**
-     *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
-     * @param {?} visit
-     * @param {?=} options
+    function (event) {
+        assert.isTruthy(event.navigationTrigger === 'popstate');
+        if (this.currentSession) {
+            this.currentSession.onPopState(event);
+        }
+        else {
+            /** @type {?} */
+            var poppedHistoryUrl = event.url;
+            /** @type {?} */
+            var currentRouterUrl = this.urlService.getCurrentRouterUrl();
+            /** @type {?} */
+            var session = this.interactionService.isActive() ?
+                new PopStateDuringInteractionNavigation(this.navigationContext, currentRouterUrl, poppedHistoryUrl) :
+                new PopStateNavigation(this.navigationContext, currentRouterUrl, poppedHistoryUrl);
+            this.transitionTo(session);
+        }
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} event
      * @return {?}
      */
-    function (visit, options) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return tslib_1.__generator(this, function (_a) {
-                this.doNavigation(visit, (/**
-                 * @param {?} router
-                 * @return {?}
-                 */
-                function (router) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                    var commands;
-                    return tslib_1.__generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                commands = tslib_1.__spread([
-                                    visit.placeDefinition.path
-                                ], this.createRouteParameters(visit));
-                                return [4 /*yield*/, this.router.navigate(commands, {
-                                        relativeTo: options ? options.relativeTo : null
-                                    })];
-                            case 1:
-                                _a.sent();
-                                return [2 /*return*/];
-                        }
-                    });
-                }); }));
-                return [2 /*return*/];
-            });
-        });
+    PlaceRouter.prototype.onRouterStarted = 
+    // @Trace()
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        assert.isFalsey(event.navigationTrigger === 'popstate');
+        /** @type {?} */
+        var inInteraction = this.interactionService.isActive();
+        if (this.currentSession) {
+            this.currentSession.onRouterStarted(event);
+        }
+        else {
+            this.transitionTo(this.createNavigationSession(this.urlService.getCurrentRouterUrl()));
+        }
     };
     // @Trace()
     // @Trace()
     /**
-     * @param {?} activatedRoute
-     * @param {?} previous
-     * @param {?} next
+     * @param {?} newUrl
      * @return {?}
      */
-    PlaceRouter.prototype.pushVisitChangesToRoute = 
+    PlaceRouter.prototype.onUrlChanged = 
     // @Trace()
     /**
-     * @param {?} activatedRoute
-     * @param {?} previous
-     * @param {?} next
+     * @param {?} newUrl
      * @return {?}
      */
-    function (activatedRoute, previous, next) {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var _this = this;
+    function (newUrl) {
+        // the back button can trigger a url change without a navigation session in progress so we
+        // console.log(`---> Url Changed ${newUrl}`);
+        if (this.currentSession) {
+            this.currentSession.onUrlChange(newUrl);
+        }
+        else {
+            console.log('FYI: url changed without a navigation session in progress');
+        }
+        // console.log(`<--- Url Changed`);
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    PlaceRouter.prototype.onRouterCancelled = 
+    // @Trace()
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        this.currentSession.onRouterCancelled(event);
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    PlaceRouter.prototype.onRouterError = 
+    // @Trace()
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        this.currentSession.onRouterError(event);
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    PlaceRouter.prototype.onRouterEnd = 
+    // @Trace()
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        this.currentSession.onRouterEnd(event);
+    };
+    /**
+     * @param {?} visit
+     * @param {?=} options
+     * @return {?}
+     */
+    PlaceRouter.prototype.navigate = /**
+     * @param {?} visit
+     * @param {?=} options
+     * @return {?}
+     */
+    function (visit, options) {
+        var _this = this;
+        return this.doNavigation(visit, (/**
+         * @param {?} router
+         * @return {?}
+         */
+        function (router) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var commands;
             return tslib_1.__generator(this, function (_a) {
-                // we have to push to history so our remember sanitisers don't pick up the previous value
-                // when it's been cleared by the user.
-                this.placeHistory.add(next);
-                // FIXME: no route id -> route id duplicates route parameters
-                if (next.hasRoutingChangedFrom(previous)) {
-                    return [2 /*return*/, this.doNavigation(next, (/**
-                         * @param {?} router
-                         * @return {?}
-                         */
-                        function (router) {
-                            /** @type {?} */
-                            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);
-                        }))];
+                switch (_a.label) {
+                    case 0:
+                        commands = tslib_1.__spread([
+                            visit.placeDefinition.path
+                        ], this.createRouteParameters(visit));
+                        return [4 /*yield*/, this.angularRouter.navigate(commands, {
+                                relativeTo: options ? options.relativeTo : null
+                            })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
                 }
-                return [2 /*return*/];
             });
-        });
+        }); }));
     };
+    // @Trace()
+    // @Trace()
     /**
      * @param {?} visit
      * @param {?} runNavigationCommands
      * @return {?}
      */
-    PlaceRouter.prototype.doNavigation = /**
+    PlaceRouter.prototype.doNavigation = 
+    // @Trace()
+    /**
      * @param {?} visit
      * @param {?} runNavigationCommands
      * @return {?}
      */
     function (visit, runNavigationCommands) {
         return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var _this = this;
+            var navigation;
             return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (this.navigationInProgress.value) {
                             lang.illegalState('Navigation already in progress');
                         }
-                        this.runStateTransition((/**
-                         * @param {?} current
-                         * @return {?}
-                         */
-                        function (current) {
-                            /** @type {?} */
-                            var session = _this.navigationState.onPlaceNavigationStart(visit, _this.getCurrentRouterUrl());
-                            session.storeVisit(visit);
-                            return session;
-                        }));
+                        navigation = this.createNavigationSession(this.urlService.getCurrentRouterUrl());
+                        navigation.storeVisit(visit);
+                        this.transitionTo(navigation);
                         _a.label = 1;
                     case 1:
                         _a.trys.push([1, , 3, 4]);
-                        return [4 /*yield*/, runNavigationCommands(this.router)];
+                        return [4 /*yield*/, runNavigationCommands(this.angularRouter)];
                     case 2:
                         _a.sent();
                         return [3 /*break*/, 4];
                     case 3:
-                        // Router has finished (since there was no router change required) so we
-                        // need to end the navigation session.
-                        if (this.navigationState.isTransitional && !this.router.getCurrentNavigation()) {
-                            this.runStateTransition((/**
-                             * @param {?} session
-                             * @return {?}
-                             */
-                            function (session) { return session.onRouterEnd(new NavigationEnd(-1, '', '')); }));
+                        // Check if the router has finished (in the case where no router change required) and we're still in  a
+                        // transient state and finish of the transition.
+                        if (!this.angularRouter.getCurrentNavigation() && this.currentSession) {
+                            this.currentSession.onRouterEnd(new NavigationEnd(-1, '', ''));
                         }
                         return [7 /*endfinally*/];
                     case 4: return [2 /*return*/];
@@ -329,242 +335,245 @@ var PlaceRouter = /** @class */ (function (_super) {
             });
         });
     };
+    /**
+     * @param {?} urlSnapshot
+     * @param {?=} navigationExtras
+     * @return {?}
+     */
+    PlaceRouter.prototype.navigateByUrl = /**
+     * @param {?} urlSnapshot
+     * @param {?=} navigationExtras
+     * @return {?}
+     */
+    function (urlSnapshot, navigationExtras) {
+        // console.log(`### navigationByUrl -> ${urlSnapshot.urlTree.toString()}`);
+        return this.angularRouter.navigateByUrl(urlSnapshot.urlTree, navigationExtras);
+    };
+    Object.defineProperty(PlaceRouter.prototype, "activeVisits", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._activeVisits.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
     // @Trace()
     // @Trace()
     /**
-     * @protected
-     * @param {?} transition
+     * @param {?} previous
+     * @param {?} next
      * @return {?}
      */
-    PlaceRouter.prototype.runStateTransition = 
+    PlaceRouter.prototype.pushVisitChangesToRoute = 
     // @Trace()
     /**
-     * @protected
-     * @param {?} transition
+     * @param {?} previous
+     * @param {?} next
      * @return {?}
      */
-    function (transition) {
-        /** @type {?} */
-        var previous = this._navigationStateModel.value;
-        /** @type {?} */
-        var next = transition(this.navigationState);
-        this._navigationStateModel.value = next;
-        if (next !== previous) {
-            previous.dispose();
-            Logger.get(this).info("Router State Transition: " + previous.toString() + " -> " + next.toString());
-        }
+    function (previous, next) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return tslib_1.__generator(this, function (_a) {
+                // we have to push to history so our remember sanitisers don't pick up the previous value
+                // when it's been cleared by the user.
+                this.placeHistory.add(next);
+                // FIXME: no route id -> route id duplicates route parameters
+                if (next.hasRoutingChangedFrom(previous)) {
+                    return [2 /*return*/, this.doNavigation(next, (/**
+                         * @param {?} router
+                         * @return {?}
+                         */
+                        function (router) {
+                            /** @type {?} */
+                            var urlSnapshot = _this.urlService.parseUrl(_this.angularRouter.routerState.snapshot.url).updateVisitSegments(next);
+                            // console.log('### Push Changes to route Redirect', { commands: urlSnapshot.url });
+                            return _this.navigateByUrl(urlSnapshot);
+                        }))];
+                }
+                return [2 /*return*/];
+            });
+        });
     };
     /**
      * @private
-     * @param {?} visit
+     * @param {?} currentRouterUrl
      * @return {?}
      */
-    PlaceRouter.prototype.createRouteParameters = /**
+    PlaceRouter.prototype.createNavigationSession = /**
      * @private
-     * @param {?} visit
+     * @param {?} currentRouterUrl
      * @return {?}
      */
-    function (visit) {
+    function (currentRouterUrl) {
         /** @type {?} */
-        var def = visit.placeDefinition;
-        return visit.hasRouteId() ?
-            [def.getFormattedRouteId(visit), def.getFormattedRouteParameters(visit)] :
-            [def.getFormattedRouteParameters(visit)];
-    };
-    /**
-     * @param {?} activatedRoute
-     * @return {?}
-     */
-    PlaceRouter.prototype.extractChildPath = /**
-     * @param {?} activatedRoute
-     * @return {?}
-     */
-    function (activatedRoute) {
-        return _.flatten(activatedRoute.children.map((/**
-         * @param {?} child
-         * @return {?}
-         */
-        function (child) { return child.url; })));
+        var inInteraction = this.interactionService.isActive();
+        return inInteraction ?
+            new NavigatingDuringInteraction(this.navigationContext, currentRouterUrl) :
+            new Navigating(this.navigationContext, currentRouterUrl);
     };
+    // @Trace()
+    // @Trace()
     /**
-     * @param {?} url
-     * @return {?}
-     */
-    PlaceRouter.prototype.parseUrl = /**
-     * @param {?} url
+     * @protected
+     * @param {?} next
      * @return {?}
      */
-    function (url) {
-        return new UrlSnapshot(this.urlSerializer, url);
-    };
+    PlaceRouter.prototype.transitionTo = 
+    // @Trace()
     /**
-     * @param {?} url
-     * @param {?} options
-     * @return {?}
-     */
-    PlaceRouter.prototype.resetBrowserLocation = /**
-     * @param {?} url
-     * @param {?} options
+     * @protected
+     * @param {?} next
      * @return {?}
      */
-    function (url, options) {
-        options.replaceCurrent ? this.angularLocation.replaceState(url) : this.angularLocation.go(url);
+    function (next) {
+        /** @type {?} */
+        var previous = this.navigationSessionModel.value;
+        assert.isTruthy(next !== previous);
+        Logger.get(this).info("### Router State Transition: " + (previous ? previous.toString() : 'null') + " -> " + next.toString());
+        this.navigationSessionModel.value = next;
+        if (!!previous) {
+            previous.dispose();
+        }
+        next.notifyActive();
     };
+    // @Trace()
+    // @Trace()
     /**
+     * @private
+     * @param {?} visits
      * @return {?}
      */
-    PlaceRouter.prototype.forward = /**
-     * @return {?}
-     */
-    function () {
-        this.angularLocation.forward();
-    };
+    PlaceRouter.prototype.routingSessionFinished = 
+    // @Trace()
     /**
-     * @param {...?} visits
-     * @return {?}
-     */
-    PlaceRouter.prototype.createUrlSnapshot = /**
-     * @param {...?} visits
+     * @private
+     * @param {?} visits
      * @return {?}
      */
-    function () {
+    function (visits) {
         var _this = this;
-        var visits = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            visits[_i] = arguments[_i];
+        if (visits && visits.length > 0) {
+            assert.isTruthy(this.navigationInProgress.value);
+            visits.forEach((/**
+             * @param {?} v
+             * @return {?}
+             */
+            function (v) { return _this.placeHistory.add(v); }));
+            // We update the active visits before we finish the session so the
+            // place outlets can ignore the incoming changes until things are
+            // settled. TODO: can we removed the event'ness here and just do a push?
+            this._activeVisits.value = visits;
         }
         /** @type {?} */
-        var bits = [];
-        visits.forEach((/**
-         * @param {?} v
+        var session = this.currentSession;
+        session.dispose();
+        this.navigationSessionModel.value = null;
+        console.log("### Router Session Finished (was " + session.toString() + ")");
+        this.sessionFinishedJobs.forEach((/**
+         * @param {?} job
          * @return {?}
          */
-        function (v) {
-            bits.push(_this.parseUrl("" + v.placeDefinition.path).updateVisitSegments(v).url);
-        }));
-        return this.parseUrl(bits.join(''));
-    };
-    /**
-     * @return {?}
-     */
-    PlaceRouter.prototype.getCurrentRouterUrl = /**
-     * @return {?}
-     */
-    function () {
-        return this.router.routerState ? this.router.routerState.snapshot.url : null;
-    };
-    /**
-     * @return {?}
-     */
-    PlaceRouter.prototype.getCurrentRouteSnapshot = /**
-     * @return {?}
-     */
-    function () {
-        return this.parseUrl(this.getCurrentRouterUrl());
+        function (job) { return job(); }));
+        this.sessionFinishedJobs = [];
     };
     /**
-     * @param {?} url
+     * @private
+     * @param {?} func
      * @return {?}
      */
-    PlaceRouter.prototype.getActiveInteractionIdsFromUrl = /**
-     * @param {?} url
+    PlaceRouter.prototype.runAfterCurrentRoutingSession = /**
+     * @private
+     * @param {?} func
      * @return {?}
      */
-    function (url) {
-        return this.parseUrl(url).getInteractionIds();
+    function (func) {
+        assert.isTruthy(this.navigationInProgress);
+        this.sessionFinishedJobs.push(func);
     };
-    // @Trace()
-    // @Trace()
     /**
-     * @param {?} url
-     * @return {?}
+     * Sync's the current interaction state with the URL.  We need to push something in the URL in order
+     * to be able to capture the back button on the first page.  If we don't then the back click will exit
+     * the app directly and we don't get to ask.
      */
-    PlaceRouter.prototype.hasActiveInteractionIds = 
     // @Trace()
     /**
-     * @param {?} url
+     * Sync's the current interaction state with the URL.  We need to push something in the URL in order
+     * to be able to capture the back button on the first page.  If we don't then the back click will exit
+     * the app directly and we don't get to ask.
      * @return {?}
      */
-    function (url) {
-        return this.getActiveInteractionIdsFromUrl(url).length > 0;
-    };
-    // @Trace()
     // @Trace()
-    /**
-     * @param {?} urlSnapshot
-     * @param {?=} navigationExtras
+    PlaceRouter.prototype.syncInteractionContextIdsWithRouter = /**
+     * Sync's the current interaction state with the URL.  We need to push something in the URL in order
+     * to be able to capture the back button on the first page.  If we don't then the back click will exit
+     * the app directly and we don't get to ask.
      * @return {?}
      */
-    PlaceRouter.prototype.navigateByUrl = 
     // @Trace()
-    /**
-     * @param {?} urlSnapshot
-     * @param {?=} navigationExtras
-     * @return {?}
-     */
-    function (urlSnapshot, navigationExtras) {
-        return this.router.navigateByUrl(urlSnapshot.urlTree, navigationExtras);
+    function () {
+        var _this = this;
+        if (this.navigationSession) {
+            // console.log(`Navigation active -> ${this.navigationSession.toString()}, sync delayed until finished.`);
+            /** @type {?} */
+            var session = this.navigationSession;
+            return new Promise((/**
+             * @param {?} resolve
+             * @param {?} reject
+             * @return {?}
+             */
+            function (resolve, reject) {
+                _this.runAfterCurrentRoutingSession((/**
+                 * @return {?}
+                 */
+                function () {
+                    // console.log(`Starting delayed sync job`);
+                    /** @type {?} */
+                    var syncSession = new SynchroniseInteractionContextIdsWithRoute(_this.navigationContext, _this.urlService.getCurrentRouterUrl(), false);
+                    syncSession.onDispose((/**
+                     * @return {?}
+                     */
+                    function () { return resolve(); }));
+                    _this.transitionTo(syncSession);
+                }));
+            }));
+        }
+        else {
+            return new Promise(((/**
+             * @param {?} resolve
+             * @param {?} reject
+             * @return {?}
+             */
+            function (resolve, reject) {
+                // console.log(`No navigation in progress, starting synchronisation job`);
+                /** @type {?} */
+                var session = new SynchroniseInteractionContextIdsWithRoute(_this.navigationContext, _this.urlService.getCurrentRouterUrl(), false);
+                session.onDispose((/**
+                 * @return {?}
+                 */
+                function () { return resolve(); }));
+                _this.transitionTo(session);
+            })));
+        }
     };
-    // TODO: Should this be moved to the navigation states?
-    // TODO: Should this be moved to the navigation states?
     /**
-     * @param {?} currentIds
-     * @param {?} previous
+     * @private
+     * @param {?} visit
      * @return {?}
      */
-    PlaceRouter.prototype.syncInteractionIdsWithRouter = 
-    // TODO: Should this be moved to the navigation states?
-    /**
-     * @param {?} currentIds
-     * @param {?} previous
+    PlaceRouter.prototype.createRouteParameters = /**
+     * @private
+     * @param {?} visit
      * @return {?}
      */
-    function (currentIds, previous) {
-        var _this = this;
-        assert.isFalsey(this.navigationInProgress.value); // Updating interaction routes during an existing navigation breaks all the things.
-        console.log({
-            startingActivity: currentIds.length > previous.length,
-            wasBackButton: this.navigationState.isPopState
-        });
-        if (_.isEqual(currentIds, previous)) {
-            console.log('activity ids were the same, skipping');
-        }
-        else {
-            // OMG, this is nuts.
-            /** @type {?} */
-            var addingActivity = currentIds.length > previous.length;
-            /** @type {?} */
-            var isFirstActivity = addingActivity && previous.length < 1;
-            /** @type {?} */
-            var removingLastActivity = currentIds.length < 1;
-            if (addingActivity) { // we're starting a new activity, push the change to the history and update the url
-                console.log('adding activity');
-                this.navigateByUrl(this.getCurrentRouteSnapshot().updateInteractionIds(currentIds), {
-                    replaceUrl: !isFirstActivity // we don't let the history pile up
-                });
-            }
-            else {
-                /** @type {?} */
-                var urlSnapshot = this.getCurrentRouteSnapshot().updateInteractionIds(currentIds);
-                if (removingLastActivity) {
-                    this.navigateByUrl(urlSnapshot, {
-                        replaceUrl: true
-                    }).then((/**
-                     * @return {?}
-                     */
-                    function () {
-                        // for some reason we need to pop the last history off the stack when leaving the
-                        // active activity state.
-                        _this.angularLocation.back();
-                    }));
-                }
-                else {
-                    this.navigateByUrl(urlSnapshot, {
-                        replaceUrl: true
-                    });
-                }
-            }
-        }
+    function (visit) {
+        /** @type {?} */
+        var def = visit.placeDefinition;
+        return visit.hasRouteId() ?
+            [def.getFormattedRouteId(visit), def.getFormattedRouteParameters(visit)] :
+            [def.getFormattedRouteParameters(visit)];
     };
     PlaceRouter.decorators = [
         { type: Injectable, args: [{
@@ -574,64 +583,68 @@ var PlaceRouter = /** @class */ (function (_super) {
     /** @nocollapse */
     PlaceRouter.ctorParameters = function () { return [
         { type: Router },
-        { type: UrlSerializer },
         { type: Location },
-        { type: PlaceHistory },
-        { type: InteractionService }
+        { type: InteractionService },
+        { type: UrlService },
+        { type: PlaceHistory }
     ]; };
-    /** @nocollapse */ PlaceRouter.ngInjectableDef = i0.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(i0.ɵɵinject(i1.Router), i0.ɵɵinject(i1.UrlSerializer), i0.ɵɵinject(i2.Location), i0.ɵɵinject(i3.PlaceHistory), i0.ɵɵinject(i4.InteractionService)); }, token: PlaceRouter, providedIn: "root" });
+    /** @nocollapse */ PlaceRouter.ngInjectableDef = i0.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(i0.ɵɵinject(i1.Router), i0.ɵɵinject(i2.Location), i0.ɵɵinject(i3.InteractionService), i0.ɵɵinject(i4.UrlService), i0.ɵɵinject(i5.PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
     return PlaceRouter;
 }(GarbageCollector));
 export { PlaceRouter };
 if (false) {
+    /** @type {?} */
+    PlaceRouter.prototype.navigationSessionModel;
+    /** @type {?} */
+    PlaceRouter.prototype.navigationInProgress;
+    /** @type {?} */
+    PlaceRouter.prototype.navigationSessionName;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype._navigationStateModel;
+    PlaceRouter.prototype.navigationContext;
     /**
      * @type {?}
      * @private
      */
     PlaceRouter.prototype._activeVisits;
     /** @type {?} */
-    PlaceRouter.prototype.navigationInProgress;
-    /** @type {?} */
-    PlaceRouter.prototype.activeVisitIndex;
+    PlaceRouter.prototype.activeVisitsByPlaceDefinition;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype._navigationSessionContext;
+    PlaceRouter.prototype.routerInteractionAdapter;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype._navigationStateTypeModel;
+    PlaceRouter.prototype.sessionFinishedJobs;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.router;
+    PlaceRouter.prototype.angularRouter;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.urlSerializer;
+    PlaceRouter.prototype.angularLocation;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.angularLocation;
+    PlaceRouter.prototype.interactionService;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.placeHistory;
+    PlaceRouter.prototype.urlService;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.interactionService;
+    PlaceRouter.prototype.placeHistory;
 }
 //# sourceMappingURL=place-router.js.map