chore(modal-navigation): add reset root view mechanism (#1389)

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

@@ -2,6 +2,8 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
 import { AppRoutingModule } from "./app.routing";
 import { AppComponent } from "./app.component";
+import { TabComponent } from "./tab.component";
+import { LayoutComponent } from "./layout.component";
 
 import { HomeComponent } from "./home/home.component";
 import { SecondComponent } from "./second/second.component";
@@ -14,28 +16,31 @@ import { ModalViewContentComponent } from "./modal-shared/modal-view-content.com
 import { ModalSharedSecondComponent } from "./modal-shared/modal-shared-second.component";
 import { ViewContainerRefService } from "./shared/ViewContainerRefService";
 
-// import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
-// import { routerTraceCategory } from "nativescript-angular/trace";
+import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
+import { routerTraceCategory } from "nativescript-angular/trace";
+import { NativeScriptPlatformRef } from "nativescript-angular";
 
-// addCategories(routerTraceCategory);
-// traceEnable();
+addCategories(routerTraceCategory);
+traceEnable();
 
 @NgModule({
-    bootstrap: [
-        AppComponent
-    ],
     imports: [
         NativeScriptModule,
         AppRoutingModule
     ],
     entryComponents: [
+        AppComponent, 
+        TabComponent, 
+        LayoutComponent, 
         ModalRouterComponent, 
         NestedModalComponent, 
-        ModalComponent,
+        ModalComponent, 
         ModalViewComponent
     ],
     declarations: [
         AppComponent,
+        TabComponent,
+        LayoutComponent,
         HomeComponent,
         SecondComponent,
         ModalComponent,
@@ -56,4 +61,25 @@ import { ViewContainerRefService } from "./shared/ViewContainerRefService";
 /*
 Pass your application module to the bootstrapModule function located in main.ts to start your app
 */
-export class AppModule { }
+
+export class AppModule {
+    private static appRef: any;
+    public static platformRef: NativeScriptPlatformRef;
+    public static root: string = "page-router";
+
+    ngDoBootstrap(app) {
+        AppModule.appRef = app;
+        AppModule.bootstrapRootComponent();
+    }
+
+    static bootstrapRootComponent() {
+        const options = {
+            'page-router': AppComponent,
+            'tab': TabComponent,
+            'layout': LayoutComponent      
+        };
+
+        const component = options[AppModule.root];
+        AppModule.appRef.bootstrap(component);
+    }
+}

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

@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
-import { Routes } from "@angular/router";
+import { Routes, Router } from "@angular/router";
 
 import { HomeComponent } from "./home/home.component";
 import { SecondComponent } from "./second/second.component";
@@ -10,6 +10,8 @@ import { NestedModalComponent } from "./modal-nested/modal-nested.component";
 import { ModalViewContentComponent } from "./modal-shared/modal-view-content.component";
 import { ModalSharedSecondComponent } from "./modal-shared/modal-shared-second.component";
 
+import { AppModule } from "./app.module";
+
 const routes: Routes = [
     { path: "", redirectTo: "/home", pathMatch: "full" },
     {
@@ -38,8 +40,64 @@ const routes: Routes = [
     }
 ];
 
+const routesTab: Routes = [
+    { path: "", redirectTo: "/home(secondOutlet:second)", pathMatch: "full" },
+    {
+        path: "home", component: HomeComponent, children: [
+            {
+                path: "modal", component: ModalComponent, children: [
+                    { path: "nested-frame-modal", component: NestedModalComponent }]
+            },
+            {
+                path: "modal-second", component: ModalSecondComponent
+            }
+        ]
+    },
+    {
+        path: "second", component: SecondComponent, children: [
+            {
+                path: "modal", component: ModalComponent, children: [
+                    { path: "nested-frame-modal", component: NestedModalComponent }]
+            },
+            {
+                path: "modal-second", component: ModalSecondComponent
+            }
+        ]
+    },
+    {
+        path: "second", outlet: "secondOutlet", component: SecondComponent, children: [
+            {
+                path: "modal", component: ModalComponent, children: [
+                    { path: "nested-frame-modal", component: NestedModalComponent }]
+            },
+            {
+                path: "modal-second", component: ModalSecondComponent
+            }
+        ]
+    }
+];
+
+const routesLayout: Routes = [
+    {
+        path: "modal", component: ModalComponent, children: [
+            { path: "nested-frame-modal", component: NestedModalComponent }]
+    },
+    { path: "modal-second", component: ModalSecondComponent }
+]
+
+
 @NgModule({
     imports: [NativeScriptRouterModule.forRoot(routes)],
     exports: [NativeScriptRouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+    constructor(private router: Router) {
+        if (AppModule.root === "page-router") {
+            this.router.resetConfig(routes);
+        } else if (AppModule.root === "layout") {
+            this.router.resetConfig(routesLayout);
+        } else {
+            this.router.resetConfig(routesTab);
+        }
+    }
+}

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

@@ -7,8 +7,10 @@
     <Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
     <Button text="Navigate To Second Page" (tap)="onNavigateSecond()"></Button>
     <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
-    <Button text="Reset Tab Root View"></Button>
-    <Button text="Reset Layout Root View"></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>
+
     <Button text="show shared modal" (tap)="onRootModalTap()"></Button>
     <Button text="go to second (to open shared modal)" [nsRouterLink]="['/modal-shared-second-host']"></Button>
     <Label text="home component" verticalAlignment="bottom"></Label>

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

@@ -7,6 +7,9 @@ import { ViewContainerRefService } from "../shared/ViewContainerRefService";
 import { ModalRouterComponent } from "../modal/modal-router/modal-router.component";
 import { ModalComponent } from "../modal/modal.component";
 import { ModalViewComponent } from "../modal-shared/modal-view.component";
+import { confirm } from "ui/dialogs";
+
+import { AppModule } from "../app.module";
 
 @Component({
     moduleId: module.id,
@@ -15,12 +18,12 @@ import { ModalViewComponent } from "../modal-shared/modal-view.component";
 })
 export class HomeComponent {
     constructor(
-        private modal: ModalDialogService, 
-        private vcRef: ViewContainerRef, 
+        private modal: ModalDialogService,
+        private vcRef: ViewContainerRef,
         private viewContainerRefService: ViewContainerRefService,
         private routerExtension: RouterExtensions) { }
 
-    onModalNoFrame(args: EventData) {
+    onModalNoFrame() {
         const options: ModalDialogOptions = {
             context: {
                 navigationVisibility: false
@@ -34,7 +37,7 @@ export class HomeComponent {
         });
     }
 
-    onModalFrame(args: EventData) {
+    onModalFrame() {
         const options: ModalDialogOptions = {
             context: {
                 navigationVisibility: true,
@@ -49,12 +52,23 @@ export class HomeComponent {
         });
     }
 
-    onNavigateSecond(args: EventData) {
+    onNavigateSecond() {
         this.routerExtension.navigate(["second"]);
     }
 
-    onFrameRootViewReset(args: EventData) {
-
+    onFrameRootViewReset() {
+        AppModule.root = "page-router";
+        AppModule.platformRef._livesync();
+    }
+
+    onTabRootViewReset() {
+        AppModule.root = "tab";
+        AppModule.platformRef._livesync();
+    }
+
+    onLayoutRootViewReset() {
+        AppModule.root = "layout";
+        AppModule.platformRef._livesync();
     }
 
     onRootModalTap(): void {
@@ -69,4 +83,17 @@ export class HomeComponent {
                 console.log(result);
             });
     }
+
+    onShowDialog() {
+        let options = {
+            title: "Dialog",
+            message: "Message",
+            okButtonText: "Yes",
+            cancelButtonText: "No"
+        }
+
+        confirm(options).then((result: boolean) => {
+            console.log(result);
+        })
+    }
 }

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

@@ -0,0 +1,9 @@
+<StackLayout>
+    <Label text="Home" 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 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>
+</StackLayout>

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

@@ -0,0 +1,92 @@
+import { Component, ViewContainerRef } from "@angular/core";
+import { Router, NavigationEnd } from "@angular/router";
+import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
+import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { ModalComponent } from "./modal/modal.component";
+import { ModalViewComponent } from "./modal-shared/modal-view.component";
+import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
+import { confirm } from "ui/dialogs";
+
+import { AppModule } from "./app.module";
+
+import { ViewContainerRefService } from "./shared/ViewContainerRefService";
+
+@Component({
+    selector: "ns-layout",
+    templateUrl: "layout.component.html",
+})
+
+export class LayoutComponent {
+    constructor(
+        private modal: ModalDialogService,
+        private router: Router,
+        private 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;
+    }
+
+    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");
+        });
+    }
+
+    onFrameRootViewReset() {
+        AppModule.root = "page-router";
+        AppModule.platformRef._livesync();
+    }
+
+    onTabRootViewReset() {
+        AppModule.root = "tab";
+        AppModule.platformRef._livesync();
+    }
+
+    onLayoutRootViewReset() {
+        AppModule.root = "layout";
+        AppModule.platformRef._livesync();
+    }
+
+    onShowDialog() {
+        let options = {
+            title: "Dialog",
+            message: "Message",
+            okButtonText: "Yes",
+            cancelButtonText: "No"
+        }
+
+        confirm(options).then((result: boolean) => {
+            console.log(result);
+        })
+    }
+}

e2e/modal-navigation-ng/app/main.aot.ts

@@ -1,7 +1,9 @@
 // this import should be first in order to load some required settings (like globals and reflect-metadata)
 import { platformNativeScript } from "nativescript-angular/platform-static";
-
+import { AppModule } from "./app.module";
+import { NativeScriptPlatformRef } from "nativescript-angular";
 // "./app.module.ngfactory" is a dynamically generated module when compiled with AoT.
 import { AppModuleNgFactory } from "./app.module.ngfactory";
 
-platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);
+AppModule.platformRef = <NativeScriptPlatformRef>platformNativeScript();
+AppModule.platformRef.bootstrapModuleFactory(AppModuleNgFactory);

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

@@ -2,9 +2,7 @@
 import { platformNativeScriptDynamic } from "nativescript-angular/platform";
 
 import { AppModule } from "./app.module";
+import { NativeScriptPlatformRef } from "nativescript-angular";
 
-// A traditional NativeScript application starts by initializing global objects, setting up global CSS rules, creating, and navigating to the main page. 
-// Angular applications need to take care of their own initialization: modules, components, directives, routes, DI providers. 
-// A NativeScript Angular app needs to make both paradigms work together, so we provide a wrapper platform object, platformNativeScriptDynamic, 
-// that sets up a NativeScript application and can bootstrap the Angular framework.
-platformNativeScriptDynamic().bootstrapModule(AppModule);
+AppModule.platformRef = <NativeScriptPlatformRef>platformNativeScriptDynamic();
+AppModule.platformRef.bootstrapModule(AppModule);

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

@@ -5,5 +5,5 @@
 
 <GridLayout #rootLayout rows="auto, auto" (loaded)="onLoaded($event)">
     <Button text="Go Back" (tap)="goBack()"></Button>
-    <Button row="1" text="Close Modal Nested" (tap)="close(rootLayout)"></Button>
+    <Button row="1" text="Close Modal" (tap)="close(rootLayout)"></Button>
 </GridLayout>