fix(dialogs): unable to reopen shared modal view when tab as root

e2e/modal-navigation-ng/app/app.css

@@ -9,7 +9,6 @@ In many cases you may want to use the NativeScript core theme instead
 of writing your own CSS rules. For a full list of class names in the theme
 refer to http://docs.nativescript.org/ui/theme.
 */
-@import '~nativescript-theme-core/css/core.light.css';
 Button {
     font-size: 10px;
-}
+}

e2e/modal-navigation-ng/app/app.ios.css

@@ -0,0 +1,12 @@
+#home-page {
+    font-size: 10;
+    margin: 0px;
+    padding: 0px;
+}
+#home-page Button {
+    margin-bottom: 20px;
+    padding: 20px;
+    border-color: gray;
+    border-width: 2px;
+    border-radius: 8px;
+}

e2e/modal-navigation-ng/app/app.routing.ts

@@ -102,6 +102,12 @@ const routesTab: Routes = [
                 path: "modal-second", component: ModalSecondComponent
             }
         ]
+    },
+    {
+        path: "modal-shared", component: ModalViewContentComponent, outlet: "modalOutlet"
+    },
+    {
+        path: "modal-shared-second-host", component: ModalSharedSecondComponent
     }
 ];
 
@@ -113,7 +119,6 @@ const routesLayout: Routes = [
     { path: "modal-second", component: ModalSecondComponent }
 ]
 
-
 @NgModule({
     imports: [NativeScriptRouterModule.forRoot(routes)],
     exports: [NativeScriptRouterModule]

e2e/modal-navigation-ng/app/home/home.component.html

@@ -1,17 +1,24 @@
-<ActionBar class="action-bar">
-    <Label class="action-bar-title" text="Home Component" automationText="Home Component" ></Label>
+<ActionBar >
+    <Label text="Home Component" automationText="Home Component"></Label>
 </ActionBar>
 
-<WrapLayout>
-    <Button text="Show Modal Without Frame" (tap)="onModalNoFrame()"></Button>
-    <Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
-    <Button text="Navigate To Second Page" (tap)="onNavigateSecond()"></Button>
-    <Button text="Reset Named Frame Root View" (tap)="onNamedFrameRootViewReset()"></Button>
-    <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
-    <Button text="Reset Tab Root View" (tap)="onTabRootViewReset()"></Button>
-    <Button text="Reset Layout Root View" automationText="Reset Layout Root View" (tap)="onLayoutRootViewReset()"></Button>
-    <Button text="Show Dialog" (tap)="onShowDialog()"></Button>
+<GridLayout rows="auto" columns="auto, *" >
+    <StackLayout id="home-page" row="0" col="0" borderColor="yellowgreen" borderWidth="1" borderRadius="5" padding="2">
+        <TextView text="Reset root" editable="false" ></TextView>
+        <Button text="Reset Named Frame Root View" (tap)="onNamedFrameRootViewReset()" textAlignment="left" ></Button>
+        <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()" textAlignment="left" ></Button>
+        <Button text="Reset Tab Root View" (tap)="onTabRootViewReset()" textAlignment="left" ></Button>
+        <Button text="Reset Layout Root View" automationText="Reset Layout Root View" (tap)="onLayoutRootViewReset()" textAlignment="left"></Button>
+    </StackLayout>
+    <StackLayout id="home-page" row="0" col="1" borderColor="blue" borderWidth="1" borderRadius="5" marginLeft="2"
+        padding="2">
+        <TextView text="Navigate to example" editable="false"></TextView>
 
-    <Button text="show shared modal" (tap)="onRootModalTap()"></Button>
-    <Button text="go to second (to open shared modal)" [nsRouterLink]="['/modal-shared-second-host']"></Button>
-</WrapLayout>  
+        <Button text="Show Modal Without Frame" (tap)="onModalNoFrame()" textAlignment="left"></Button>
+        <Button text="Show Modal Page With Frame" (tap)="onModalFrame()" textAlignment="left"></Button>
+        <Button text="Navigate To Second Page" (tap)="onNavigateSecond()" textAlignment="left"></Button>
+        <Button text="Show Dialog" (tap)="onShowDialog()" textAlignment="left"></Button>
+        <Button text="show shared modal" (tap)="onRootModalTap()" textAlignment="left"></Button>
+        <Button text="go to second (to open shared modal)" [nsRouterLink]="['/modal-shared-second-host']" textAlignment="left"></Button>
+    </StackLayout>
+</GridLayout>

e2e/modal-navigation-ng/app/layout.component.html

@@ -1,10 +1,19 @@
-<WrapLayout>
-    <Label text="Home Component" horizontalAlignment="center"></Label>
-    <Button text="Show Modal Without Frame" (tap)="onModalNoFrame()"></Button>
-    <Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
-    <Button text="Reset Named Frame Root View" (tap)="onNamedFrameRootViewReset()"></Button>
-    <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
-    <Button text="Reset Tab Root View" (tap)="onTabRootViewReset()"></Button>
-    <Button text="Reset Layout Root View" (tap)="onLayoutRootViewReset()"></Button>
-    <Button text="Show Dialog" (tap)="onShowDialog()"></Button>
-</WrapLayout>
+<GridLayout rows="auto,auto" columns="auto, *">
+    <Label text="Home Component" row="0" col="0" horizontalAlignment="center"></Label>
+    <StackLayout id="home-page" row="1" col="0" borderColor="yellowgreen" borderWidth="1" borderRadius="5" padding="2">
+        <TextView text="Reset root" editable="false"></TextView>
+        <Button text="Reset Named Frame Root View" (tap)="onNamedFrameRootViewReset()" textAlignment="left"></Button>
+        <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()" textAlignment="left"></Button>
+        <Button text="Reset Tab Root View" (tap)="onTabRootViewReset()" textAlignment="left"></Button>
+        <Button text="Reset Layout Root View" automationText="Reset Layout Root View" (tap)="onLayoutRootViewReset()"
+            textAlignment="left"></Button>
+    </StackLayout>
+    <StackLayout id="home-page" row="1" col="1" borderColor="blue" borderWidth="1" borderRadius="5" marginLeft="2"
+        padding="2">
+        <TextView text="Navigate to example" editable="false"></TextView>
+
+        <Button text="Show Modal Without Frame" (tap)="onModalNoFrame()" textAlignment="left"></Button>
+        <Button text="Show Modal Page With Frame" (tap)="onModalFrame()" textAlignment="left"></Button>
+        <Button text="Show Dialog" (tap)="onShowDialog()" textAlignment="left"></Button>
+    </StackLayout>
+</GridLayout>

e2e/modal-navigation-ng/app/layout.component.ts

@@ -22,15 +22,15 @@ export class LayoutComponent {
         private router: Router,
         private location: NSLocationStrategy,
         private vcRef: ViewContainerRef,
-        private _viewContainerRefService: ViewContainerRefService) {
+        private viewContainerRefService: ViewContainerRefService) {
         router.events.subscribe(e => {
             if (e instanceof NavigationEnd) {
                 console.log("[ROUTER]: " + e.toString());
                 console.log(location.toString());
             }
         });
 
-        this._viewContainerRefService.root = this.vcRef;
+        this.viewContainerRefService.root = this.vcRef;
     }
 
     onModalNoFrame() {

e2e/modal-navigation-ng/app/tab.component.ts

@@ -1,12 +1,27 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, ViewContainerRef } from "@angular/core";
 import { Router, NavigationEnd } from "@angular/router";
-import { RouterExtensions } from "nativescript-angular/router";
+import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
+
+import { ViewContainerRefService } from "./shared/ViewContainerRefService";
 
 @Component({
     selector: "ns-tab",
     templateUrl: "tab.component.html",
 })
 
 export class TabComponent  {
-    constructor(private routerExtension: RouterExtensions) { }
+    constructor(
+        router: Router, 
+        location: NSLocationStrategy,
+        private _vcRef: ViewContainerRef,
+        private _viewContainerRefService: ViewContainerRefService) {
+        router.events.subscribe(e => {
+            if (e instanceof NavigationEnd) {
+                console.log("[ROUTER]: " + e.toString());
+               console.log(location.toString());
+            }
+        });
+
+        this._viewContainerRefService.root = this._vcRef;
+    }
 }