fix(dialogs): properly handle shared modal when using TabView as a root

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

@@ -0,0 +1,12 @@
+Button{
+    font-size: 8;
+    margin: 0px;
+    padding: 0px;
+    height: 40;
+}
+
+TextView {
+    font-size: 10;
+    margin: 0px;
+    padding: 0px;
+}

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

@@ -4,24 +4,47 @@ import { NSLocationStrategy } from "nativescript-angular/router/ns-location-stra
 
 import { ViewContainerRefService } from "./shared/ViewContainerRefService";
 
+import { AppModule } from "./app.module";
+import { ModalDialogOptions, ModalDialogService } from "nativescript-angular";
+import { ModalViewComponent } from "./modal-shared/modal-view.component";
+
 @Component({
-    selector: "ns-app",
-    templateUrl: "app.component.html",
+  selector: "ns-app",
+  templateUrl: "app.component.html"
 })
-
 export class AppComponent {
-    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());
-            }
-        });
+  constructor(
+    router: Router,
+    location: NSLocationStrategy,
+    private modal: ModalDialogService,
+    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;
+  }
 
-        this._viewContainerRefService.root = this._vcRef;
+  ngOnInit() {
+    if (AppModule.root === "page-router-modal") {
+        this.onRootModalTap();
+        console.log("Page modal page from frame root");
     }
+  }
+
+  onRootModalTap(): void {
+    const options: ModalDialogOptions = {
+      viewContainerRef: this._viewContainerRefService.root,
+      context: {},
+      fullscreen: true
+    };
+
+    this.modal.showModal(ModalViewComponent, options).then((result: string) => {
+      console.log(result);
+    });
+  }
 }

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

@@ -7,6 +7,8 @@ import { TabComponent } from "./tab.component";
 import { LayoutComponent } from "./layout.component";
 
 import { HomeComponent } from "./home/home.component";
+import { RootSectionComponent } from "./navigation/root.section.component";
+import { BasicsNavigationComponent } from "./navigation/basic.navigation.component";
 import { SecondComponent } from "./second/second.component";
 import { ModalSecondComponent } from "./modal-second/modal-second.component";
 import { ModalComponent } from "./modal/modal.component";
@@ -44,6 +46,8 @@ traceEnable();
         NamedRouterComponent,
         TabComponent,
         LayoutComponent,
+        RootSectionComponent,
+        BasicsNavigationComponent,
         HomeComponent,
         SecondComponent,
         ModalComponent,
@@ -78,9 +82,13 @@ export class AppModule {
     static bootstrapRootComponent() {
         const options = {
             'page-router': AppComponent,
+            'page-router-modal': AppComponent,
             'named-page-router': NamedRouterComponent,
+            'named-page-router-modal': NamedRouterComponent,
             'tab': TabComponent,
-            'layout': LayoutComponent
+            'tab-modal': TabComponent,
+            'layout': LayoutComponent,
+            'layout-modal': LayoutComponent,
         };
 
         const component = options[AppModule.root];

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

@@ -116,7 +116,13 @@ const routesLayout: Routes = [
         path: "modal", component: ModalComponent, children: [
             { path: "nested-frame-modal", component: NestedModalComponent }]
     },
-    { path: "modal-second", component: ModalSecondComponent }
+    { path: "modal-second", component: ModalSecondComponent },
+    {
+        path: "modal-shared", component: ModalViewContentComponent, outlet: "modalOutlet"
+    },
+    {
+        path: "modal-shared-second-host", component: ModalSharedSecondComponent
+    }
 ]
 
 @NgModule({
@@ -125,13 +131,13 @@ const routesLayout: Routes = [
 })
 export class AppRoutingModule {
     constructor(private router: Router) {
-        if (AppModule.root === "page-router") {
+        if (AppModule.root === "page-router" ||  AppModule.root === "page-router-modal") {
             this.router.resetConfig(routes);
-        } else if (AppModule.root === "layout") {
+        } else if (AppModule.root === "layout" || AppModule.root === "layout-modal") {
             this.router.resetConfig(routesLayout);
-        } else if (AppModule.root === "named-page-router") {
+        } else if (AppModule.root === "named-page-router" || AppModule.root === "named-page-router-modal") {
             this.router.resetConfig(namedOutletRoutes);
-        } else {
+        } else if(AppModule.root === "tab" ||  AppModule.root === "tab-modal"){
             this.router.resetConfig(routesTab);
         }
     }

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

@@ -2,23 +2,13 @@
     <Label text="Home Component" automationText="Home Component"></Label>
 </ActionBar>
 
-<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>
+<GridLayout rows="auto, auto" columns="auto, *" >
+    <root-section row="0" col="0" ></root-section>
     <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 Modal Without Frame" (tap)="onModalNoFrame()" textAlignment="left"></Button>
-        <Button text="Show Modal Page With Frame" (tap)="onModalFrame()" textAlignment="left"></Button>
+        <basic-nav></basic-nav> 
         <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>
+        <Button text="Navigate To Second Page Named Outlet" (tap)="onNavigateSecondWithOutlet()" 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/home/home.component.ts

@@ -12,93 +12,22 @@ import { confirm } from "tns-core-modules/ui/dialogs";
 import { AppModule } from "../app.module";
 
 @Component({
-    moduleId: module.id,
-    selector: "home-page",
-    templateUrl: "./home.component.html"
+  moduleId: module.id,
+  selector: "home-page",
+  templateUrl: "./home.component.html"
 })
 export class HomeComponent {
-    constructor(
-        private modal: ModalDialogService,
-        private vcRef: ViewContainerRef,
-        private viewContainerRefService: ViewContainerRefService,
-        private routerExtension: RouterExtensions) { }
-
-    onModalNoFrame() {
-        const options: ModalDialogOptions = {
-            context: {
-                navigationVisibility: false
-            },
-            fullscreen: true,
-            viewContainerRef: this.vcRef
-        };
-
-        this.modal.showModal(ModalComponent, options).then((res: string) => {
-            console.log("moda-no-frame closed");
-        });
-    }
-
-    onModalFrame() {
-        const options: ModalDialogOptions = {
-            context: {
-                navigationVisibility: true,
-                modalRoute: "modal"
-            },
-            fullscreen: true,
-            viewContainerRef: this.vcRef
-        };
-
-        this.modal.showModal(ModalRouterComponent, options).then((res: string) => {
-            console.log("moda-frame closed");
-        });
-    }
-
-    onNavigateSecond() {
-        this.routerExtension.navigate(["second"]);
-    }
-
-    onFrameRootViewReset() {
-        AppModule.root = "page-router";
-        AppModule.platformRef._livesync();
-    }
-
-    onNamedFrameRootViewReset() {
-        AppModule.root = "named-page-router";
-        AppModule.platformRef._livesync();
-    }
-
-    onTabRootViewReset() {
-        AppModule.root = "tab";
-        AppModule.platformRef._livesync();
-    }
-
-    onLayoutRootViewReset() {
-        AppModule.root = "layout";
-        AppModule.platformRef._livesync();
-    }
-
-    onRootModalTap(): void {
-        const options: ModalDialogOptions = {
-            viewContainerRef: this.viewContainerRefService.root,
-            context: {},
-            fullscreen: true
-        };
-
-        this.modal.showModal(ModalViewComponent, options)
-            .then((result: string) => {
-                console.log(result);
-            });
-    }
-
-    onShowDialog() {
-        let options = {
-            title: "Dialog",
-            message: "Message",
-            okButtonText: "Yes",
-            cancelButtonText: "No"
-        }
-
-        confirm(options).then((result: boolean) => {
-            console.log(result);
-        })
-    }
+  constructor(
+    private modal: ModalDialogService,
+    private vcRef: ViewContainerRef,
+    private viewContainerRefService: ViewContainerRefService,
+    private routerExtension: RouterExtensions) { }
+
+  onNavigateSecond() {
+      this.routerExtension.navigate(["second"]);
+  }
+
+  onNavigateSecondWithOutlet() {
+    this.routerExtension.navigate([ { outlets: { namedRouter:["second"] } }]);
+  }
 }

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

@@ -1,19 +1,4 @@
-<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 columns="auto, *" automationText="Home Component" >
+    <root-section></root-section>
+    <basic-nav col="1" ></basic-nav>
 </GridLayout>