fix(location-strategy): extend support for nested primary outlets

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

@@ -1 +1 @@
-<page-router-outlet></page-router-outlet>
+<page-router-outlet tag="rootPRO"></page-router-outlet>

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

@@ -48,6 +48,10 @@ const routes: Routes = [
         path: "home-lazy",
         loadChildren: "./home-lazy/home-lazy.module#HomeLazyModule",
     },
+    {
+        path: "custom-tabs",
+        loadChildren: "./custom-tabs/custom-tabs.module#CustomTabsModule",
+    },
     {
         path: "tabs", component: TabsComponent, children: [
             { path: "players", component: PlayerComponent, outlet: "playerTab" },

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

@@ -0,0 +1,19 @@
+<ActionBar title="Custom Tabs Component" class="action-bar">
+    <NavigationButton text="Root Back"></NavigationButton>
+
+    <StackLayout orientation="horizontal">
+        <Button horizontalAlignment="left" android:visibility="visible" ios:visibility="collapse" text="Root Back" (tap)="onRootBack()"></Button>
+        <Label horizontalAlignment="center" text="Custom Tabs Component"></Label>
+    </StackLayout>
+</ActionBar>
+
+<GridLayout rows="50,*, auto">
+    <!-- <Button row="0" text="CanGoBack(ParentRoute)" automationText="CanGoBack(ParentRoute)" col="3" (tap)="canGoBackParentRoute()"></Button> -->
+    <GridLayout row="1">
+        <page-router-outlet tag="customTabsPRO"></page-router-outlet>
+    </GridLayout>
+    <GridLayout row="2" columns="*, *">
+        <Button col="0" text="Players Tab" [nsRouterLink]="['../tabs/players']"></Button>
+        <Button col="1" text="Teams Tab" [nsRouterLink]="['../tabs/teams']"></Button>
+    </GridLayout>
+</GridLayout>

e2e/nested-router-tab-view/app/custom-tabs/custom-tabs.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { RouterExtensions } from "nativescript-angular/router";
+import { ActivatedRoute } from "@angular/router";
+import { confirm } from "tns-core-modules/ui/dialogs";
+import { Page } from 'tns-core-modules/ui/page/page';
+
+@Component({
+  moduleId: module.id,
+  selector: 'custom-tabs',
+  templateUrl: './custom-tabs.component.html'
+})
+export class CustomTabsComponent implements OnInit {
+
+  constructor(
+    private activeRoute: ActivatedRoute,
+    private routerExtension: RouterExtensions,
+    private page: Page) { }
+
+  ngOnInit() {
+  }
+
+  canGoBackParentRoute() {
+    const canGoBackParentRoute = this.routerExtension.canGoBack({ relativeTo: this.activeRoute });
+    const title = "CanGoBack(ParentRoute)";
+    this.onShowDialog(title, title + ` ${canGoBackParentRoute}`);
+  }
+
+  onRootBack() {
+    this.page.frame.goBack();
+  }
+
+  onShowDialog(title: string, result: string) {
+    let options: any = {
+      title: title,
+      message: result,
+      okButtonText: "Ok"
+    }
+
+    confirm(options).then((result: boolean) => {
+      console.log(result);
+    })
+  }
+}

e2e/nested-router-tab-view/app/custom-tabs/custom-tabs.module.ts

@@ -0,0 +1,38 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from 'nativescript-angular/common';
+import { NativeScriptRouterModule } from 'nativescript-angular/router';
+
+import { CustomTabsComponent } from './custom-tabs.component';
+import { PlayerComponent } from "../player/players.component";
+import { PlayerDetailComponent } from "../player/player-detail.component";
+import { TeamsComponent } from "../team/teams.component";
+import { TeamDetailComponent } from "../team/team-detail.component";
+import { Route } from "@angular/router";
+import { SharedModule } from "../shared.module";
+
+const routes: Route[] = [
+  {
+    path: 'tabs',
+    component: CustomTabsComponent,
+    children: [
+      { path: "players", component: PlayerComponent },
+      { path: "player/:id", component: PlayerDetailComponent },
+
+      { path: "teams", component: TeamsComponent },
+      { path: "team/:id", component: TeamDetailComponent },
+    ]
+  },
+];
+
+@NgModule({
+  declarations: [CustomTabsComponent
+  ],
+  imports: [
+    NativeScriptCommonModule,
+    NativeScriptRouterModule,
+    NativeScriptRouterModule.forChild(routes),
+    SharedModule
+  ],
+  schemas: [NO_ERRORS_SCHEMA]
+})
+export class CustomTabsModule { }

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

@@ -3,7 +3,7 @@
 </ActionBar>
 
 <StackLayout>
-    <!-- <Button text="Go To Home Page" [nsRouterLink]="['/home', { outlets: { playerTab: ['players'], teamTab: ['teams'] } }]"></Button> -->
     <Button text="Go To Home Page" [nsRouterLink]="['../home', { outlets: { playerTab: ['players'], teamTab: ['teams'] } }]"></Button>
     <Button text="Go To Lazy Home Page" [nsRouterLink]="['../home-lazy/home', { outlets: { playerTab: ['players'], teamTab: ['teams'] } }]"></Button>
+    <Button text="Go To Lazy Custom Tabs" [nsRouterLink]="['../custom-tabs/tabs/players']"></Button>
 </StackLayout> 

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

@@ -1,4 +1,6 @@
-<ActionBar title="Player Details" class="action-bar"></ActionBar>
+<ActionBar title="Player Details" class="action-bar">
+    <!-- <NavigationButton visibility="hidden"></NavigationButton> -->
+</ActionBar>
 <StackLayout flexDirection="column" class="page" class="m-15">
     <Label [text]="item.id"></Label>
     <Label [text]="item.name + ' Details'"></Label>

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

@@ -1,11 +1,11 @@
-<ActionBar title="Player List" class="action-bar"></ActionBar>
+<ActionBar title="Player List" class="action-bar">
+    <!-- <NavigationButton visibility="hidden"></NavigationButton> -->
+</ActionBar>
 
-<GridLayout>
-    <!-- <Button text="Open Named Modal" (tap)="onModalFrame()"></Button> -->
-    <ListView [items]="items" class="list-group">
+<GridLayout rows="auto,*">
+    <ListView row="1" [items]="items" class="list-group">
         <ng-template let-item="item">
-            <Label [nsRouterLink]="['../player', item.id]" [text]="item.name"
-                class="list-group-item"></Label>
+            <Label [nsRouterLink]="['../player', item.id]" [text]="item.name" class="list-group-item"></Label>
         </ng-template>
     </ListView>
 </GridLayout>

e2e/nested-router-tab-view/app/player/players.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit, ViewContainerRef } from "@angular/core";
 import { DataService, DataItem } from "../data.service";
-import { RouterExtensions } from "nativescript-angular/router";
 
 import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
 import { ModalRouterComponent } from "../modal/modal-router/modal-router.component";
@@ -12,7 +11,10 @@ import { ModalRouterComponent } from "../modal/modal-router/modal-router.compone
 export class PlayerComponent implements OnInit {
     items: DataItem[];
 
-    constructor(private modal: ModalDialogService, private itemService: DataService, private router: RouterExtensions, private vcRef: ViewContainerRef, ) { }
+    constructor(
+        private modal: ModalDialogService,
+        private itemService: DataService,
+        private vcRef: ViewContainerRef, ) { }
 
     ngOnInit(): void {
         this.items = this.itemService.getPlayers();

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

@@ -1,4 +1,6 @@
-<ActionBar title="Team Details" class="action-bar"></ActionBar>
+<ActionBar title="Team Details" class="action-bar">
+    <!-- <NavigationButton visibility="hidden"></NavigationButton> -->
+</ActionBar>
 <StackLayout flexDirection="column" class="page" class="m-15">
     <Label [text]="item.id"></Label>
     <Label [text]="item.name + ' Details'"></Label>

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

@@ -1,4 +1,6 @@
-<ActionBar title="Team List" class="action-bar"></ActionBar>
+<ActionBar title="Team List" class="action-bar">
+    <!-- <NavigationButton visibility="hidden"></NavigationButton> -->
+</ActionBar>
 
 <GridLayout>
     <ListView [items]="items" class="list-group">

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

@@ -0,0 +1,72 @@
+import { AppiumDriver, createDriver } from "nativescript-dev-appium";
+import { Screen } from "./screen"
+import {
+    testPlayerNavigated,
+    testTeamNavigated,
+    testPlayerNextNavigated,
+    testTeamNextNavigated,
+} from "./shared.e2e-spec"
+
+describe("custom-tabs:", () => {
+    let driver: AppiumDriver;
+    let screen: Screen;
+
+    before(async () => {
+        driver = await createDriver();
+        screen = new Screen(driver);
+    });
+
+    after(async () => {
+        await driver.quit();
+        console.log("Quit driver!");
+    });
+
+    afterEach(async function () {
+        if (this.currentTest.state === "failed") {
+            await driver.logTestArtifacts(this.currentTest.title);
+        }
+    });
+
+    it("loaded custom tab component and tabs", async () => {
+        await screen.navigateCustomTabsPage();
+        await screen.loadedCustomTabsPage();
+        await screen.loadedPlayersList();
+        await gotoTeamsTab(driver);
+        await screen.loadedTeamList();
+    });
+
+    it("navigate back to login and again to custom tabs", async () => {
+        await backRoot(driver);
+        await screen.loadedLogin();
+        await screen.navigateCustomTabsPage();
+        await screen.loadedCustomTabsPage();
+        await screen.loadedPlayersList();
+        await gotoTeamsTab(driver);
+        await screen.loadedTeamList();
+    });
+
+    it("navigate back to login and again to custom tabs", async () => {
+        await gotoPlayersTab(driver);
+        await testPlayerNavigated(screen, screen.playerOne);
+        await gotoTeamsTab(driver);
+        await screen.loadedTeamList();
+        await testTeamNavigated(screen, screen.teamOne);
+        await backRoot(driver);
+        await screen.loadedLogin();
+    });
+});
+
+async function backRoot(driver: AppiumDriver) {
+    const btnBackRoot = await driver.findElementByAutomationText("Root Back");
+    await btnBackRoot.tap();
+}
+
+async function gotoPlayersTab(driver: AppiumDriver) {
+    const btnTabTeams = await driver.findElementByAutomationText("Players Tab");
+    await btnTabTeams.tap();
+}
+
+async function gotoTeamsTab(driver: AppiumDriver) {
+    const btnTabTeams = await driver.findElementByAutomationText("Teams Tab");
+    await btnTabTeams.tap();
+}

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

@@ -1,6 +1,7 @@
 import { AppiumDriver, SearchOptions } from "nativescript-dev-appium";
 import { assert } from "chai";
 
+const customTabs = "Custom Tabs Component";
 const home = "Home Component";
 const about = "About Component";
 const aboutNested = "Nested About Component";
@@ -18,6 +19,7 @@ const gotoNextTeam = "next team";
 const gotoTeams = "teams";
 
 const gotoHomePage = "Go To Home Page";
+const gotoCustomTabPage = "Go To Lazy Custom Tabs";
 const gotoAboutPage = "Go To About Page";
 const gotoTabsPage = "Go To Tabs Page";
 const confirmDialog = "Ok";
@@ -68,6 +70,12 @@ export class Screen {
         console.log(home + " loaded!");
     }
 
+    loadedCustomTabsPage= async () => {
+        const lblCustomTabs = await this._driver.findElementByAutomationText(customTabs);
+        assert.isTrue(await lblCustomTabs.isDisplayed());
+        console.log(home + " loaded!");
+    }
+
     loadedAbout= async () => {
         const lblAbout = await this._driver.findElementByAutomationText(about);
         assert.isTrue(await lblAbout.isDisplayed());
@@ -128,6 +136,11 @@ export class Screen {
         await btnNavToHomePage.tap();
     }
 
+    navigateCustomTabsPage = async () => {
+        const btnNavToHomePage = await this._driver.findElementByAutomationText(gotoCustomTabPage);
+        await btnNavToHomePage.tap();
+    }
+
     navigateToAboutPage = async () => {
         const btnNavToAboutPage = await this._driver.findElementByAutomationText(gotoAboutPage);
         await btnNavToAboutPage.tap();