fix(location-strategy): find the correct outlet when navigating back and forward

Author: ADjenkov

Diff for: nativescript-angular/directives/dialogs.ts

@@ -74,7 +74,9 @@ export class ModalDialogService {
         const componentContainer = moduleRef || viewContainerRef;
         const resolver = componentContainer.injector.get(ComponentFactoryResolver);
 
-        this.location._beginModalNavigation();
+        const frame = parentView.page && parentView.page.frame;
+
+        this.location._beginModalNavigation(frame);
 
         return new Promise(resolve => {
             setTimeout(() => this._showDialog({

Diff for: nativescript-angular/router/ns-location-strategy.ts

@@ -2,7 +2,7 @@ import { Injectable } from "@angular/core";
 import { LocationStrategy } from "@angular/common";
 import { DefaultUrlSerializer, UrlSegmentGroup, UrlTree } from "@angular/router";
 import { routerLog } from "../trace";
-import { NavigationTransition } from "tns-core-modules/ui/frame";
+import { NavigationTransition, Frame } from "tns-core-modules/ui/frame";
 import { isPresent } from "../lang-facade";
 import { FrameService } from "../platform-providers";
 
@@ -77,7 +77,7 @@ export class NSLocationStrategy extends LocationStrategy {
     }
 
     pushState(state: any, title: string, url: string, queryParams: string): void {
-         routerLog("NSLocationStrategy.pushState state: " +
+        routerLog("NSLocationStrategy.pushState state: " +
             `${state}, title: ${title}, url: ${url}, queryParams: ${queryParams}`);
         this.pushStateInternal(state, title, url, queryParams);
     }
@@ -240,7 +240,9 @@ export class NSLocationStrategy extends LocationStrategy {
 
     private callPopState(state: LocationState, pop: boolean = true) {
         const urlSerializer = new DefaultUrlSerializer();
-        if (state) {
+        const rootOutlet = this.currentUrlTree.root.children[this.currentOutlet];
+
+        if (state && rootOutlet) {
             this.currentUrlTree.root.children[this.currentOutlet] = state.segmentGroup;
         } else {
             // when closing modal view there are scenarios (e.g. root viewContainerRef) when we need
@@ -283,13 +285,20 @@ export class NSLocationStrategy extends LocationStrategy {
     }
 
     // Methods for syncing with page navigation in PageRouterOutlet
-    public _beginBackPageNavigation(name: string) {
+    public _beginBackPageNavigation(name: string, frame: Frame) {
         routerLog("NSLocationStrategy.startGoBack()");
         if (this._isPageNavigationBack) {
             throw new Error("Calling startGoBack while going back.");
         }
         this._isPageNavigationBack = true;
-        this.currentOutlet = name;
+
+        let { cachedFrame, hasDuplicateOutlet } = this.frameService.findFrame(frame, name);
+
+        if (cachedFrame) {
+            this.currentOutlet = cachedFrame.rootOutlet;
+        } else if (!hasDuplicateOutlet) {
+            this.currentOutlet = name;
+        }
     }
 
     public _finishBackPageNavigation() {
@@ -304,9 +313,12 @@ export class NSLocationStrategy extends LocationStrategy {
         return this._isPageNavigationBack;
     }
 
-    public _beginModalNavigation(): void {
+    public _beginModalNavigation(frame: Frame): void {
         routerLog("NSLocationStrategy._beginModalNavigation()");
-        const lastState = this.peekState(this.currentOutlet);
+
+        let { cachedFrameRootOutlet } = this.frameService.findFrame(frame);
+
+        const lastState = this.peekState(cachedFrameRootOutlet || this.currentOutlet);
 
         if (lastState) {
             lastState.isModalNavigation = true;
@@ -333,19 +345,30 @@ export class NSLocationStrategy extends LocationStrategy {
         this._isModalClosing = false;
     }
 
-    public _beginPageNavigation(name: string): NavigationOptions {
+    public _beginPageNavigation(name: string, frame: Frame): NavigationOptions {
         routerLog("NSLocationStrategy._beginPageNavigation()");
-        const lastState = this.peekState(name);
+
+        let { cachedFrame, hasDuplicateOutlet } = this.frameService.findFrame(frame, name);
+
+        if (cachedFrame) {
+            this.currentOutlet = cachedFrame.rootOutlet;
+        } else {
+            if (!hasDuplicateOutlet) {
+                this.currentOutlet = name;
+            }
+
+            this.frameService.addFrame(frame, name, this.currentOutlet);
+        }
+
+        const lastState = this.peekState(this.currentOutlet);
         if (lastState) {
             lastState.isPageNavigation = true;
         }
 
-        this.currentOutlet = name;
-
         const navOptions = this._currentNavigationOptions || defaultNavOptions;
         if (navOptions.clearHistory) {
             routerLog("NSLocationStrategy._beginPageNavigation clearing states history");
-            this.statesByOutlet[name] = [lastState];
+            this.statesByOutlet[this.currentOutlet] = [lastState];
         }
 
         this._currentNavigationOptions = undefined;

Diff for: nativescript-angular/router/page-router-outlet.ts

@@ -25,6 +25,7 @@ import { DetachedLoader } from "../common/detached-loader";
 import { ViewUtil } from "../view-util";
 import { NSLocationStrategy } from "./ns-location-strategy";
 import { NSRouteReuseStrategy } from "./ns-route-reuse-strategy";
+import { FrameService } from "../platform-providers";
 
 export class PageRoute {
     activatedRoute: BehaviorSubject<ActivatedRoute>;
@@ -149,7 +150,8 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
         @Inject(DEVICE) device: Device,
         @Inject(PAGE_FACTORY) private pageFactory: PageFactory,
         private routeReuseStrategy: NSRouteReuseStrategy,
-        elRef: ElementRef
+        elRef: ElementRef,
+        private frameService: FrameService
     ) {
         this.frame = elRef.nativeElement;
         log("PageRouterOutlet.constructor frame:" + this.frame);
@@ -166,6 +168,7 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
         // destroyed on modal view closing
         this.routeReuseStrategy.clearModalCache(this.name);
         this.parentContexts.onChildOutletDestroyed(this.name);
+        this.frameService.removeFrame(this.frame);
     }
 
     deactivate(): void {
@@ -286,12 +289,12 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
 
         page.on(Page.navigatedFromEvent, (<any>global).Zone.current.wrap((args: NavigatedData) => {
             if (args.isBackNavigation) {
-                this.locationStrategy._beginBackPageNavigation(this.name);
+                this.locationStrategy._beginBackPageNavigation(this.name, this.frame);
                 this.locationStrategy.back();
             }
         }));
 
-        const navOptions = this.locationStrategy._beginPageNavigation(this.name);
+        const navOptions = this.locationStrategy._beginPageNavigation(this.name, this.frame);
 
         // Clear refCache if navigation with clearHistory
         if (navOptions.clearHistory) {