feat: add lazy loaded modal and lazy routing tests

Author: sis0k0

Diff for: app/app.css

@@ -1,4 +1,6 @@
-button {
+@import '~/nativescript-theme-core/css/core.light.css';
+
+button {
     font-size: 13;
 }
 
@@ -10,3 +12,4 @@ label {
     font-family: 'Courier'; /* Enabling this results in the error and shows a blank TabView */
 }
 
+

Diff for: app/app.module.ts

@@ -1,5 +1,6 @@
-import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
+import { NSModuleFactoryLoader } from "nativescript-angular/router";
 
 import { NavigationMainPageRouter } from "./main/main-page-router-outlet";
 import { routableComponents, routes } from "./app.routes";
@@ -22,6 +23,12 @@ import { CustomTemplate } from "./list-view/list-view-item-template";
         NativeScriptRouterModule,
         NativeScriptRouterModule.forRoot(routes),
     ],
+    providers: [
+        {
+            provide: NgModuleFactoryLoader,
+            useClass: NSModuleFactoryLoader
+        }
+    ],
     schemas: [NO_ERRORS_SCHEMA],
 })
 export class AppModule { }

Diff for: app/app.routes.ts

@@ -5,9 +5,10 @@ import { SecondComponentActionBar } from "./action-bar/action-bar-second.compone
 
 import { AppComponent } from "./template/app.component";
 
-import { FirstComponent } from "./components/first.component";
-import { SecondComponent } from "./components/second.component";
-import { NavigationTestRouter, NavigationSubRoutes } from "./router/router-outlet";
+import { FirstComponent } from "./router/router-outlet/first.component";
+import { SecondComponent } from "./router/router-outlet/second.component";
+import { NavigationComponent, NavigationSubRoutes } from "./router/router-outlet/navigation.component";
+import { LazyNavigationComponent } from "./router/lazy-module-navigation/lazy-navigation.component";
 
 import { BindingComponent } from "./binding/binding-page";
 
@@ -22,6 +23,7 @@ import { ListPickerComponent } from "./list-picker/list-picker";
 
 import { ModalTest, ModalTestWithPushStrategy, ModalContent } from "./modal/modal-dialogs/modal-dialog.component";
 import { ModalViewMainPageComponent } from "./modal/modal-view-main-page";
+import { LazyLoadModalComponent } from "./modal/lazy/lazy-load-modal.component";
 
 import { TabViewComponent } from "./tab-view/tab-view.component";
 
@@ -34,7 +36,8 @@ export const routableComponents = [
     ModalContent,
     AppComponent,
 
-    NavigationTestRouter,
+    NavigationComponent,
+    LazyNavigationComponent,
 
     FirstComponent,
     SecondComponent,
@@ -56,6 +59,7 @@ export const routableComponents = [
     ModalViewMainPageComponent,
     ModalTest,
     ModalTestWithPushStrategy,
+    LazyLoadModalComponent,
 
     TabViewComponent,
 
@@ -69,7 +73,8 @@ export const routes = [
     { path: '', component: ModalContent, data: { title: "" } },
     { path: 'template', component: AppComponent, data: { title: "Template", isNavigatable: true} },
 
-    { path: 'router', component: NavigationTestRouter, children: NavigationSubRoutes, data: { title: "Router", isNavigatable: true} },
+    { path: 'router', component: NavigationComponent, children: NavigationSubRoutes, data: { title: "Router", isNavigatable: true} },
+    { path: 'lazy-router', component: LazyNavigationComponent, data: { title: "Lazy Router", isNavigatable: true} },
 
     { path: 'first', component: FirstComponent, data: { title: "First", isNavigatable: true} },
     { path: 'second', component: SecondComponent, data: { title: "Second", isNavigatable: true} },
@@ -91,10 +96,17 @@ export const routes = [
     { path: 'modal', component: ModalViewMainPageComponent, data: { title: "Modals", isNavigatable: true} },
     { path: 'modal/modal-dialogs', component: ModalTest, data: { title: "modal" } },
     { path: 'modal/modal-dialogs-push', component: ModalTestWithPushStrategy, data: { title: "modal(onPush)" } },
+    { path: 'modal/lazy', component: LazyLoadModalComponent, data: { title: "modal(lazy)" } },
 
     { path: 'tab-view', component: TabViewComponent, data: { title: "tab-view", isNavigatable: true } },
 
     { path: 'nav-options', component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true} },
     { path: 'nav-info', component: NavigationInfoComponent, data: { title: "nav-info" } },
+
+    // Needed for AoT compilation
+    { 
+        path: "lazy",
+        loadChildren: "./lazy/lazy.module#LazyModule"
+    },
 ];
 

Diff for: app/lazy/lazy.component.html

@@ -0,0 +1,18 @@
+<StackLayout>
+    <GridLayout rows="auto" columns="auto" [visibility]="isModal ? 'visible' : 'collapsed'">
+        <Button
+            automationText="closeModal"
+            text="Close Lazy Modal"
+            (tap)="close()"
+            class="btn action-item"
+            row="0" col="0"></Button>
+    </GridLayout>
+    <StackLayout class="p-20">
+        <Label 
+            automationText="lazyLoaded"
+            [text]="'Lazily loaded via ' + (isModal ? 'modal' : 'route') + '!'"
+            textWrap="true"
+            class="h1"
+        ></Label>
+    </StackLayout>
+</StackLayout>

Diff for: app/lazy/lazy.component.ts

@@ -0,0 +1,30 @@
+import { Component } from "@angular/core";
+
+import { RouterExtensions } from "nativescript-angular/router";
+import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
+
+@Component({
+    selector: "ns-lazy",
+    moduleId: module.id,
+    templateUrl: "./lazy.component.html",
+})
+export class LazyComponent {
+    public isModal: boolean;
+
+    constructor(
+        private router: RouterExtensions,
+        private params: ModalDialogParams
+    ) {
+        if (params.context.isModal) {
+            this.isModal = true;
+        }   
+    }
+
+    public close() {
+        if (this.isModal) {
+            this.params.closeCallback();
+        } else {
+            this.router.back();
+        }
+    }
+}

Diff for: app/lazy/lazy.module.ts

@@ -0,0 +1,39 @@
+import { NativeScriptModule } from "nativescript-angular/nativescript.module";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
+
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { Routes } from "@angular/router";
+
+import { LazyComponent } from "./lazy.component";
+
+export function modalParamsFactory() {
+    return new ModalDialogParams({}, null);
+}
+
+const routes: Routes = [
+  {
+    path: "",
+    component: LazyComponent
+  }
+];
+
+@NgModule({
+  imports: [
+    NativeScriptModule,
+    NativeScriptRouterModule.forChild(routes),
+  ],
+  declarations: [
+    LazyComponent
+  ],
+  entryComponents: [
+    LazyComponent
+  ],
+  providers: [
+    // allows same component to be routed to 
+    // or lazily loaded via modal
+    { provide: ModalDialogParams, useFactory: modalParamsFactory }
+  ],
+  schemas: [NO_ERRORS_SCHEMA]
+})
+export class LazyModule { }

Diff for: app/main/main-page-router-outlet.ts

@@ -16,7 +16,7 @@ export class MainComponent {
 
     constructor() {
         let navigatableRoutes = this._routes.filter((item) => {
-            return item.data.isNavigatable == true && item.path != '';
+            return item.data && item.data.isNavigatable && item.path;
         });
 
         this._pages = navigatableRoutes;

Diff for: app/modal/lazy/lazy-load-modal.component.ts

@@ -0,0 +1,38 @@
+import {
+    Component,
+    ComponentFactory,
+    NgModuleFactory,
+    NgModuleFactoryLoader,
+    ViewContainerRef,
+} from "@angular/core";
+
+import { NSModuleFactoryLoader } from "nativescript-angular/router";
+import { ModalDialogService } from "nativescript-angular/directives/dialogs";
+
+import { LazyComponent } from "../../lazy/lazy.component";
+
+@Component({
+    template: `
+        <Button text="Load modal!" (tap)="openModal()"></Button>
+    `
+})
+export class LazyLoadModalComponent {
+    constructor(
+        private moduleLoader: NgModuleFactoryLoader,
+        private vcRef: ViewContainerRef,
+        private modalService: ModalDialogService
+    ) { }
+
+    public openModal() {
+        this.moduleLoader.load('./lazy/lazy.module#LazyModule')
+            .then((module: NgModuleFactory<any>) => {
+                const moduleRef = module.create(this.vcRef.parentInjector);
+
+                this.modalService.showModal(LazyComponent, {
+                    moduleRef,
+                    viewContainerRef: this.vcRef,
+                    context: { isModal: true }
+                });
+            });
+    }
+}

Diff for: app/modal/modal-view-main-page.ts

@@ -6,6 +6,7 @@ import { Component } from "@angular/core";
     <StackLayout>
         <Button text="modal" [nsRouterLink]="['/modal','modal-dialogs']"></Button>        
         <Button text="modal(onPush)" [nsRouterLink]="['/modal','modal-dialogs-push']"></Button>
+        <Button text="modal(lazy)" [nsRouterLink]="['/modal','lazy']"></Button>
      </StackLayout>   
     `,
 })

Diff for: app/router/lazy-module-navigation/lazy-navigation.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+    template: `<Button text="Lazy module" [nsRouterLink]="['/lazy']"></Button>`,
+})
+export class LazyNavigationComponent {
+}

Diff for: app/components/first.component.ts renamed to app/router/router-outlet/first.component.ts

@@ -1,11 +1,11 @@
-import {Component} from "@angular/core";
-import {FirstComponent} from "../components/first.component";
-import {SecondComponent} from "../components/second.component";
+import { Component } from "@angular/core";
+import { FirstComponent } from "./first.component";
+import { SecondComponent } from "./second.component";
 
 @Component({
     moduleId: module.id,
-    selector: 'navigation-test',
-    styleUrls: ['./router-outlet.css'],
+    selector: "navigation-test",
+    styleUrls: ["./navigation.component.css"],
     template: `
         <StackLayout>
             <StackLayout class="nav">
@@ -19,10 +19,10 @@ import {SecondComponent} from "../components/second.component";
         </StackLayout>
     `
 })
-export class NavigationTestRouter { }
+export class NavigationComponent { }
 
 export var NavigationSubRoutes = [
-    { path: '', redirectTo: 'first', pathMatch: "full" },
-    { path: 'first', component: FirstComponent },
-    { path: 'second', component: SecondComponent },
+    { path: "", redirectTo: "first", pathMatch: "full" },
+    { path: "first", component: FirstComponent },
+    { path: "second", component: SecondComponent },
 ];

Diff for: app/router/router-outlet.css renamed to app/router/router-outlet/navigation.component.css

@@ -1,25 +1,3 @@
-// Resolve JavaScript classes that extend a Java class, and need to resolve
-// their JavaScript module from a bundled script. For example:
-// NativeScriptApplication, NativeScriptActivity, etc.
-//
-// This module gets bundled together with the rest of the app code and the
-// `require` calls get resolved to the correct bundling import call.
-//
-// At runtime the module gets loaded *before* the rest of the app code, so code
-// placed here needs to be careful about its dependencies.
-
 require("application");
 require("ui/frame");
 require("ui/frame/activity");
-
-if (global.TNS_WEBPACK) {
-    global.__requireOverride = function (name, dir) {
-        if (name === "./tns_modules/application/application.js") {
-            return require("application");
-        } else if (name === "./tns_modules/ui/frame/frame.js") {
-            return require("ui/frame");
-        } else if (name === "./tns_modules/ui/frame/activity.js") {
-            return require("ui/frame/activity");
-        }
-    };
-}

Diff for: app/router/router-outlet.ts renamed to app/router/router-outlet/navigation.component.ts

@@ -22,6 +22,7 @@
     "@angular/router": "~4.1.0",
     "nativescript-angular": "next",
     "nativescript-intl": "~3.0.0",
+    "nativescript-theme-core": "^1.0.4",
     "reflect-metadata": "~0.1.8",
     "rxjs": "^5.0.1",
     "tns-core-modules": "next",
@@ -53,4 +54,4 @@
     "build-android-bundle": "npm run ns-bundle --android --build-app",
     "build-ios-bundle": "npm run ns-bundle --ios --build-app"
   }
-}
+}