fix(location-strategy): crash on going back to TabView with nested outlets (#1582)

Author: ADjenkov

e2e/nested-router-tab-view/app/about/about.component.html

@@ -0,0 +1,7 @@
+<ActionBar class="action-bar">
+    <Label class="action-bar-title" text="About Component"></Label>
+</ActionBar>
+
+<GridLayout rows="auto, *">
+    <Button text="Back(ActivatedRoute)" automationText="Back(ActivatedRoute)" (tap)="backActivatedRoute()"></Button>
+</GridLayout>

e2e/nested-router-tab-view/app/about/about.component.ts

@@ -0,0 +1,24 @@
+import { Component, ViewContainerRef } from "@angular/core";
+import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { RouterExtensions } from "nativescript-angular/router";
+import { ActivatedRoute } from "@angular/router";
+
+@Component({
+    moduleId: module.id,
+    selector: "about-page",
+    templateUrl: "./about.component.html"
+})
+export class AboutComponent {
+    constructor(
+        private modal: ModalDialogService,
+        private vcRef: ViewContainerRef,
+        private activeRoute: ActivatedRoute,
+        private routerExtension: RouterExtensions) { }
+
+    ngOnInit() {
+    }
+
+    backActivatedRoute() {
+        this.routerExtension.back({ relativeTo: this.activeRoute });
+    }
+}

e2e/nested-router-tab-view/app/app.routing.ts

@@ -9,6 +9,7 @@ import { TeamDetailComponent } from "./team/team-detail.component";
 import { LoginComponent } from "./login/login.component";
 import { TabsComponent } from "./tabs/tabs.component";
 import { HomeComponent } from "./home/home.component";
+import { AboutComponent } from "./about/about.component";
 
 import { ModalComponent } from "./modal/modal.component";
 import { NestedModalComponent } from "./modal-nested/modal-nested.component";
@@ -54,7 +55,8 @@ const routes: Routes = [
             { path: "teams", component: TeamsComponent, outlet: "teamTab" },
             { path: "team/:id", component: TeamDetailComponent, outlet: "teamTab" },
         ]
-    }
+    },
+    { path: "about", component: AboutComponent }
 ];
 
 @NgModule({

e2e/nested-router-tab-view/app/shared.module.ts

@@ -7,6 +7,7 @@ import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { DataService } from "./data.service";
 
 import { HomeComponent } from "./home/home.component";
+import { AboutComponent } from "./about/about.component";
 import { PlayerComponent } from "./player/players.component";
 import { PlayerDetailComponent } from "./player/player-detail.component";
 import { TeamsComponent } from "./team/teams.component";
@@ -19,13 +20,15 @@ import { TeamDetailComponent } from "./team/team-detail.component";
     ],
     declarations: [
         HomeComponent,
+        AboutComponent,
         PlayerComponent,
         PlayerDetailComponent,
         TeamsComponent,
         TeamDetailComponent
     ],
     exports: [
         HomeComponent,
+        AboutComponent,
         PlayerComponent,
         PlayerDetailComponent,
         TeamsComponent,

e2e/nested-router-tab-view/app/tabs/tabs.component.html

@@ -3,6 +3,7 @@
 <StackLayout>
     <GridLayout rows="auto,*">
         <WrapLayout row="0">
+            <Button text="Go To About Page" [nsRouterLink]="['../about']"></Button>
             <Button text="Back()" (tap)="back()"></Button>
             <Button text="CanGoBack(ActivatedRoute)" (tap)="canGoBack()"></Button>
             <Button text="Back(ActivatedRoute)" (tap)="backActivatedRoute()"></Button>

e2e/nested-router-tab-view/e2e/home-tabs.e2e-spec.ts

@@ -42,6 +42,28 @@ describe("home-tabs:", () => {
                 await screen.loadedTeamList();
             });
 
+            it("should navigate to Tabs then to About forward", async () => {
+                if (driver.isIOS) {
+                    await screen.navigateToTabsPage();
+                    await screen.loadedTabs();
+                    await screen.loadedPlayersList();
+                    await screen.navigateToAboutPage();
+                    await screen.loadedAbout();
+                }
+            });
+
+            it("should go back to Tabs and then back to Home", async () => {
+                if (driver.isIOS) {
+                    await backActivatedRoute(driver);
+                    await screen.loadedTabs();
+                    await screen.loadedPlayersList();
+                    await backActivatedRoute(driver);
+                    await screen.loadedHome();
+                    await screen.loadedPlayersList();
+                    await screen.loadedTeamList();
+                }
+            });
+
             it("should navigate to Tabs without Players/Teams navigation", async () => {
                 await screen.navigateToTabsPage();
                 await screen.loadedTabs();

e2e/nested-router-tab-view/e2e/screen.ts

@@ -2,6 +2,7 @@ import { AppiumDriver, SearchOptions } from "nativescript-dev-appium";
 import { assert } from "chai";
 
 const home = "Home Component";
+const about = "About Component";
 const login = "Login Component";
 const tabs = "Tabs Component";
 
@@ -16,6 +17,7 @@ const gotoNextTeam = "next team";
 const gotoTeams = "teams";
 
 const gotoHomePage = "Go To Home Page";
+const gotoAboutPage = "Go To About Page";
 const gotoTabsPage = "Go To Tabs Page";
 const confirmDialog = "Ok";
 
@@ -65,6 +67,12 @@ export class Screen {
         console.log(home + " loaded!");
     }
 
+    loadedAbout= async () => {
+        const lblAbout = await this._driver.findElementByAutomationText(about);
+        assert.isTrue(await lblAbout.isDisplayed());
+        console.log(home + " loaded!");
+    }
+
     loadedTabs = async () => {
         const lblTabs = await this._driver.findElementByAutomationText(tabs);
         assert.isTrue(await lblTabs.isDisplayed());
@@ -113,6 +121,11 @@ export class Screen {
         await btnNavToHomePage.tap();
     }
 
+    navigateToAboutPage = async () => {
+        const btnNavToAboutPage = await this._driver.findElementByAutomationText(gotoAboutPage);
+        await btnNavToAboutPage.tap();
+    }
+
     navigateToPlayer = async (player: string) => {
         const btnNavPlayerPage = await this._driver.findElementByAutomationText(player);
         await btnNavPlayerPage.tap();

nativescript-angular/router/ns-location-strategy.ts

@@ -527,6 +527,7 @@ export class NSLocationStrategy extends LocationStrategy {
         if (!lastState || !equalStateUrls) {
             outlet.states.push(locationState);
 
+            // Update last state segmentGroup of parent Outlet.
             if (this._modalNavigationDepth === 0 && !outlet.showingModal) {
                 this.updateParentsStates(outlet, currentSegmentGroup.parent);
             }
@@ -566,6 +567,11 @@ export class NSLocationStrategy extends LocationStrategy {
         newOutlet.parent = parent;
         this.outlets.push(newOutlet);
 
+        // Update last state segmentGroup of parent Outlet.
+        if (this._modalNavigationDepth === 0 && !newOutlet.showingModal) {
+            this.updateParentsStates(newOutlet, segmentGroup.parent);
+        }
+
         return newOutlet;
     }