feat: add lazy loaded modal and lazy routing tests

Author: sis0k0

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 */
 }
 
+

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 { }

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"
+    },
 ];
 

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>

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();
+        }
+    }
+}

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 { }

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;

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 }
+                });
+            });
+    }
+}

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>   
     `,
 })

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 {
+}