fix(router): handle nested primary p-r-o (#1645)

* fix(router): handle nested primary p-r-o

* tests(e2e): test nested primary p-r-o navigation

* chore: fix getFrameToBack return displacement

Author: ADjenkov

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

@@ -0,0 +1,3 @@
+<GridLayout rows="auto">
+    <Label text="Nested About Component"></Label>
+</GridLayout>

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

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+    moduleId: module.id,
+    selector: "about-nested-page",
+    templateUrl: "./about-nested.component.html"
+})
+export class AboutNestedComponent {
+}

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

@@ -4,4 +4,7 @@
 
 <GridLayout rows="auto, *">
     <Button text="Back(ActivatedRoute)" automationText="Back(ActivatedRoute)" (tap)="backActivatedRoute()"></Button>
+    <GridLayout row="1">
+        <page-router-outlet actionBarVisibility="never"></page-router-outlet>
+    </GridLayout>
 </GridLayout>

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

@@ -1,5 +1,4 @@
-import { Component, ViewContainerRef } from "@angular/core";
-import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { Component } from "@angular/core";
 import { RouterExtensions } from "nativescript-angular/router";
 import { ActivatedRoute } from "@angular/router";
 
@@ -10,8 +9,6 @@ import { ActivatedRoute } from "@angular/router";
 })
 export class AboutComponent {
     constructor(
-        private modal: ModalDialogService,
-        private vcRef: ViewContainerRef,
         private activeRoute: ActivatedRoute,
         private routerExtension: RouterExtensions) { }
 

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

@@ -1,13 +1 @@
-<page-router-outlet tag="mainPRO"></page-router-outlet>
-
-<!-- <TabView androidTabsPosition="bottom">
-    <page-router-outlet 
-        *tabItem="{title: 'Players'}" 
-        name="playerTab">
-    </page-router-outlet>
-
-    <page-router-outlet
-        *tabItem="{title: 'Teams'}" 
-        name="teamTab">
-    </page-router-outlet>
-</TabView> -->
+<page-router-outlet></page-router-outlet>

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

@@ -10,6 +10,7 @@ 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 { AboutNestedComponent } from "./about/about-nested.component";
 
 import { ModalComponent } from "./modal/modal.component";
 import { NestedModalComponent } from "./modal-nested/modal-nested.component";
@@ -56,7 +57,11 @@ const routes: Routes = [
             { path: "team/:id", component: TeamDetailComponent, outlet: "teamTab" },
         ]
     },
-    { path: "about", component: AboutComponent }
+    {
+        path: "about", component: AboutComponent, children: [
+            { path: "about-nested", component: AboutNestedComponent },
+        ]
+    }
 ];
 
 @NgModule({

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

@@ -28,7 +28,6 @@
     <GridLayout row="1" columns="*,*">
         <GridLayout col="0">
             <page-router-outlet name="playerTab"></page-router-outlet>
-            <!-- <page-router-outlet></page-router-outlet> -->
         </GridLayout>
         <GridLayout col="1">
             <page-router-outlet name="teamTab"></page-router-outlet>

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

@@ -8,6 +8,7 @@ import { DataService } from "./data.service";
 
 import { HomeComponent } from "./home/home.component";
 import { AboutComponent } from "./about/about.component";
+import { AboutNestedComponent } from "./about/about-nested.component";
 import { PlayerComponent } from "./player/players.component";
 import { PlayerDetailComponent } from "./player/player-detail.component";
 import { TeamsComponent } from "./team/teams.component";
@@ -21,6 +22,7 @@ import { TeamDetailComponent } from "./team/team-detail.component";
     declarations: [
         HomeComponent,
         AboutComponent,
+        AboutNestedComponent,
         PlayerComponent,
         PlayerDetailComponent,
         TeamsComponent,
@@ -29,6 +31,7 @@ import { TeamDetailComponent } from "./team/team-detail.component";
     exports: [
         HomeComponent,
         AboutComponent,
+        AboutNestedComponent,
         PlayerComponent,
         PlayerDetailComponent,
         TeamsComponent,

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

@@ -3,7 +3,7 @@
 <StackLayout>
     <GridLayout rows="auto,*">
         <WrapLayout row="0">
-            <Button text="Go To About Page" [nsRouterLink]="['../about']"></Button>
+            <Button text="Go To About Page" [nsRouterLink]="['../about/about-nested']"></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

@@ -48,6 +48,7 @@ describe("home-tabs:", () => {
                 await screen.loadedPlayersList();
                 await screen.navigateToAboutPage();
                 await screen.loadedAbout();
+                await screen.loadedNestedAbout();
             });
 
             it("should go back to Tabs and then back to Home", async () => {

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

@@ -3,6 +3,7 @@ import { assert } from "chai";
 
 const home = "Home Component";
 const about = "About Component";
+const aboutNested = "Nested About Component";
 const login = "Login Component";
 const tabs = "Tabs Component";
 
@@ -70,7 +71,13 @@ export class Screen {
     loadedAbout= async () => {
         const lblAbout = await this._driver.findElementByAutomationText(about);
         assert.isTrue(await lblAbout.isDisplayed());
-        console.log(home + " loaded!");
+        console.log(about + " loaded!");
+    }
+
+    loadedNestedAbout= async () => {
+        const lblAboutNested = await this._driver.findElementByAutomationText(aboutNested);
+        assert.isTrue(await lblAboutNested.isDisplayed());
+        console.log(aboutNested + " loaded!");
     }
 
     loadedTabs = async () => {

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

@@ -53,6 +53,24 @@ export class Outlet {
         const lastState = this.peekState();
         return lastState && lastState.segmentGroup.toString() === stateUrl;
     }
+
+    // Search for frame that can go back.
+    // Nested 'primary' outlets could result in Outlet with multiple navigatable frames.
+    getFrameToBack(): Frame {
+        let frame = this.frames[this.frames.length - 1];
+
+        if (!this.isNSEmptyOutlet) {
+            for (let index = this.frames.length - 1; index >= 0; index--) {
+                const currentFrame = this.frames[index];
+                if (currentFrame.canGoBack()) {
+                    frame = currentFrame;
+                    break;
+                }
+            }
+        }
+
+        return frame;
+    }
 }
 
 export interface NavigationOptions {
@@ -251,7 +269,7 @@ export class NSLocationStrategy extends LocationStrategy {
                     const topmostFrame = this.frameService.getFrame();
                     this.currentOutlet = this.getOutletByFrame(topmostFrame);
                 }
-                this.currentOutlet.frames[this.currentOutlet.frames.length - 1].goBack();
+                this.currentOutlet.getFrameToBack().goBack();
             } else {
                 // Nested navigation - just pop the state
                 if (isLogEnabled()) {
@@ -448,6 +466,12 @@ export class NSLocationStrategy extends LocationStrategy {
             if (currentOutlet.containsFrame(frame) && !isEqualToCurrent) {
                 this.callPopState(null, true, currentOutlet);
             }
+
+            if (!currentOutlet.isNSEmptyOutlet) {
+                currentOutlet.frames = currentOutlet.frames.filter(currentFrame => currentFrame !== frame);
+                return currentOutlet.frames.length;
+            }
+
             return !currentOutlet.containsFrame(frame);
         });
     }

nativescript-angular/router/page-router-outlet.ts

@@ -423,7 +423,9 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
         if (modalNavigation > 0) { // Modal with 'primary' p-r-o
             outlet = this.locationStrategy.findOutletByModal(modalNavigation);
         } else {
+            const pathByOutlets = this.locationStrategy.getPathByOutlets(topActivatedRoute);
             outlet = this.locationStrategy.findOutletByKey(outletKey);
+            outlet = outlet || this.locationStrategy.findOutletByOutletPath(pathByOutlets);
         }
 
         // Named lazy loaded outlet.