feat(Modal): allow modal to be lazily loaded from a module on demand (#772)

This allows a NgComponent to be opened in a modal even if it was lazily loaded on demand. Example: https://github.com/NativeScript/tests-app-ng/blob/master/app/modal/lazy/lazy-load-modal.component.ts

Author: NathanWalker

.travis.yml

@@ -61,4 +61,4 @@ deploy:
   api_key:
     secure: J88MqLAoZStZZ77AAf+wgaoZp+8zG3fOUHRneSe4x/yEzyUShS9SlGuq0TSkm9sJVX94iHJl1BQ4yjLshOPV9dkOg1+BB4PbsDTKPCAhPCZgpW7WKz6iImmuWHArchLIRtI1fp+UYi1+V6c7gLALQPY7qR2QJcDJdq1tdgORAyGySMis95ttVhnn6DWTBbs/ocu+IzgOyBSkIiZR0mGk7q/pmVQPy+XL5PQoyUOhD4MmvAAIeVr+XoZ5I8pAUwhi1/bZijXrzWe7LbXh8pTDlEWvYduzYYjJZqUrHiE/e1e8/DIPXGaBUQBj7LRxSqqO8AJXGeCg4DF1R9j4CSG5c0pAwQ/U6vOGu8duPEGaoKG5+HlrTav7gI/YbwFA5HKyh1uzQ5trZDJ4mMKUoB1+8/eL2cjLudtyBB2Kg28wH6f78A9mQC1EJcP7Jz3qJTSUyhczIvwSF8/EkD8xmeaoTi2e+4TNgf7pys1cp6c7m7zKZbvVy25lfyAfG1rCF5+rzKj+GnE9mtLaY6VvlKWjyxklh8hfRBC94TZ8K7PH0tmdgk2Jal+OCdm9FDdmNrBSC1G/gPS8PchtffIRprPhNAUfcVpdg0rlQ4dckbGRbB5UBgwHkpoKasaSTx/nO85AiK6USIYOIod19loXUBvN3QyHUX76w265UhmTnb8iojo=
   on:
-    branch: master
+    branch: master

nativescript-angular/directives/dialogs.ts

@@ -1,16 +1,25 @@
 import {
-    ReflectiveInjector, ComponentFactoryResolver, ViewContainerRef,
-    Type, Injectable, ComponentRef, Directive
+    ComponentFactoryResolver,
+    ComponentRef,
+    Directive,
+    Injectable,
+    NgModuleRef,
+    ReflectiveInjector,
+    Type,
+    ViewContainerRef,
 } from "@angular/core";
+
 import { Page } from "tns-core-modules/ui/page";
 import { View } from "tns-core-modules/ui/core/view";
+
 import { DetachedLoader } from "../common/detached-loader";
 import { PageFactory, PAGE_FACTORY } from "../platform-providers";
 
 export interface ModalDialogOptions {
     context?: any;
     fullscreen?: boolean;
     viewContainerRef?: ViewContainerRef;
+    moduleRef?: NgModuleRef<any>;
 }
 
 export class ModalDialogParams {
@@ -20,42 +29,61 @@ export class ModalDialogParams {
     }
 }
 
+interface ShowDialogOptions {
+    containerRef: ViewContainerRef;
+    context: any;
+    doneCallback;
+    fullscreen: boolean;
+    pageFactory: PageFactory;
+    parentPage: Page;
+    resolver: ComponentFactoryResolver;
+    type: Type<any>;
+}
+
 @Injectable()
 export class ModalDialogService {
-    public showModal(type: Type<any>, options: ModalDialogOptions): Promise<any> {
-        if (!options.viewContainerRef) {
+    public showModal(type: Type<any>,
+        {viewContainerRef, moduleRef, context, fullscreen}: ModalDialogOptions
+    ): Promise<any> {
+        if (!viewContainerRef) {
             throw new Error(
-                "No viewContainerRef: Make sure you pass viewContainerRef in ModalDialogOptions.");
+                "No viewContainerRef: " +
+                "Make sure you pass viewContainerRef in ModalDialogOptions."
+            );
         }
 
-        const viewContainerRef = options.viewContainerRef;
         const parentPage: Page = viewContainerRef.injector.get(Page);
-        const resolver: ComponentFactoryResolver = viewContainerRef.injector.get(
-            ComponentFactoryResolver);
         const pageFactory: PageFactory = viewContainerRef.injector.get(PAGE_FACTORY);
 
-        return new Promise((resolve) => {
-            setTimeout(() => ModalDialogService.showDialog(
-                type,
-                options,
-                resolve,
-                viewContainerRef,
-                resolver,
+        // resolve from particular module (moduleRef)
+        // or from same module as parentPage (viewContainerRef)
+        const componentContainer = moduleRef || viewContainerRef;
+        const resolver = componentContainer.injector.get(ComponentFactoryResolver);
+
+        return new Promise(resolve => {
+            setTimeout(() => ModalDialogService.showDialog({
+                containerRef: viewContainerRef,
+                context,
+                doneCallback: resolve,
+                fullscreen,
+                pageFactory,
                 parentPage,
-                pageFactory
-            ), 10);
+                resolver,
+                type,
+            }), 10);
         });
     }
 
-    private static showDialog(
-        type: Type<any>,
-        options: ModalDialogOptions,
+    private static showDialog({
+        containerRef,
+        context,
         doneCallback,
-        containerRef: ViewContainerRef,
-        resolver: ComponentFactoryResolver,
-        parentPage: Page,
-        pageFactory: PageFactory): void {
-
+        fullscreen,
+        pageFactory,
+        parentPage,
+        resolver,
+        type,
+    }: ShowDialogOptions): void {
         const page = pageFactory({ isModal: true, componentType: type });
 
         let detachedLoaderRef: ComponentRef<DetachedLoader>;
@@ -66,7 +94,7 @@ export class ModalDialogService {
             detachedLoaderRef.destroy();
         };
 
-        const modalParams = new ModalDialogParams(options.context, closeCallback);
+        const modalParams = new ModalDialogParams(context, closeCallback);
 
         const providers = ReflectiveInjector.resolve([
             { provide: Page, useValue: page },
@@ -85,7 +113,7 @@ export class ModalDialogService {
             }
 
             page.content = componentView;
-            parentPage.showModal(page, options.context, closeCallback, options.fullscreen);
+            parentPage.showModal(page, context, closeCallback, fullscreen);
         });
     }
 }
@@ -96,7 +124,9 @@ export class ModalDialogService {
 })
 export class ModalDialogHost { // tslint:disable-line:directive-class-suffix
     constructor() {
-        throw new Error("ModalDialogHost is deprecated. Call ModalDialogService.showModal() " +
-            "by passing ViewContainerRef in the options instead.");
+        throw new Error("ModalDialogHost is deprecated. " +
+            "Call ModalDialogService.showModal() " +
+            "by passing ViewContainerRef in the options instead."
+        );
     }
 }

nativescript-angular/nativescript.module.ts

@@ -8,19 +8,25 @@ import "./polyfills/array";
 import "./polyfills/console";
 
 import { CommonModule } from "@angular/common";
-import { NativeScriptRendererFactory } from "./renderer";
-import { DetachedLoader } from "./common/detached-loader";
-import { ModalDialogHost, ModalDialogService } from "./directives/dialogs";
 import {
     ApplicationModule,
     ErrorHandler,
+    NO_ERRORS_SCHEMA,
+    NgModule,
     RendererFactory2,
-    NgModule, NO_ERRORS_SCHEMA,
+    SystemJsNgModuleLoader,
 } from "@angular/core";
+
+import { NativeScriptRendererFactory } from "./renderer";
+import { DetachedLoader } from "./common/detached-loader";
 import {
-    defaultPageProvider,
+    ModalDialogHost,
+    ModalDialogService,
+} from "./directives/dialogs";
+import {
+    defaultDeviceProvider,
     defaultFrameProvider,
-    defaultDeviceProvider
+    defaultPageProvider,
 } from "./platform-providers";
 import { NS_DIRECTIVES } from "./directives";
 
@@ -35,13 +41,14 @@ export function errorHandlerFactory() {
         ...NS_DIRECTIVES,
     ],
     providers: [
-        { provide: ErrorHandler, useFactory: errorHandlerFactory },
+        ModalDialogService,
+        NativeScriptRendererFactory,
+        SystemJsNgModuleLoader,
+        defaultDeviceProvider,
         defaultFrameProvider,
         defaultPageProvider,
-        defaultDeviceProvider,
-        NativeScriptRendererFactory,
+        { provide: ErrorHandler, useFactory: errorHandlerFactory },
         { provide: RendererFactory2, useClass: NativeScriptRendererFactory },
-        ModalDialogService
     ],
     entryComponents: [
         DetachedLoader,

nativescript-angular/router.ts

@@ -4,7 +4,6 @@ import {
     NO_ERRORS_SCHEMA,
     Optional,
     SkipSelf,
-    SystemJsNgModuleLoader,
 } from "@angular/core";
 import { RouterModule, Routes, ExtraOptions } from "@angular/router";
 import { LocationStrategy, PlatformLocation } from "@angular/common";
@@ -38,7 +37,6 @@ export type LocationState = LocationState;
         NativescriptPlatformLocation,
         { provide: PlatformLocation, useClass: NativescriptPlatformLocation },
         RouterExtensions,
-        SystemJsNgModuleLoader,
     ],
     imports: [
         RouterModule,

nativescript-angular/router/ns-module-factory-loader.ts

@@ -1,11 +1,11 @@
 import {
-    Injectable,
     Compiler,
+    Injectable,
     NgModuleFactory,
     NgModuleFactoryLoader,
     SystemJsNgModuleLoader,
+    Type,
 } from "@angular/core";
-
 import { path, knownFolders } from "tns-core-modules/file-system";
 
 const SEPARATOR = "#";
@@ -14,48 +14,50 @@ const SEPARATOR = "#";
 export class NSModuleFactoryLoader implements NgModuleFactoryLoader {
     private offlineMode: boolean;
 
-    constructor(private compiler: Compiler, private ngModuleLoader: SystemJsNgModuleLoader) {
+    constructor(
+        private compiler: Compiler,
+        private ngModuleLoader: SystemJsNgModuleLoader,
+    ) {
         this.offlineMode = compiler instanceof Compiler;
     }
 
     load(path: string): Promise<NgModuleFactory<any>> {
-        if (this.offlineMode) {
-            return this.ngModuleLoader.load(path);
-        } else {
-            return this.loadAndCompile(path);
-        }
+        return this.offlineMode ?
+            this.ngModuleLoader.load(path) :
+            this.loadAndCompile(path);
     }
 
     private loadAndCompile(path: string): Promise<NgModuleFactory<any>> {
-        let {modulePath, exportName} = splitPath(path);
+        const module = requireModule(path);
+        return Promise.resolve(this.compiler.compileModuleAsync(module));
+    }
+}
 
-        let loadedModule = global.require(modulePath)[exportName];
-        checkNotEmpty(loadedModule, modulePath, exportName);
+function requireModule(path: string): Type<any> {
+    const {modulePath, exportName} = splitPath(path);
 
-        return Promise.resolve(this.compiler.compileModuleAsync(loadedModule));
-    }
+    const loadedModule = global.require(modulePath)[exportName];
+    checkNotEmpty(loadedModule, modulePath, exportName);
 
+    return loadedModule;
 }
 
 function splitPath(path: string): {modulePath: string, exportName: string} {
-    let [modulePath, exportName] = path.split(SEPARATOR);
-    modulePath = getAbsolutePath(modulePath);
-
-    if (typeof exportName === "undefined") {
-        exportName = "default";
-    }
+    const [relativeModulePath, exportName = "default"] = path.split(SEPARATOR);
+    const absoluteModulePath = getAbsolutePath(relativeModulePath);
 
-    return {modulePath, exportName};
+    return {modulePath: absoluteModulePath, exportName};
 }
 
 function getAbsolutePath(relativePath: string) {
-    return path.normalize(path.join(knownFolders.currentApp().path, relativePath));
+    const projectPath = knownFolders.currentApp().path;
+    const absolutePath = path.join(projectPath, relativePath);
+
+    return path.normalize(absolutePath);
 }
 
-function checkNotEmpty(value: any, modulePath: string, exportName: string): any {
+function checkNotEmpty(value: any, modulePath: string, exportName: string): void {
     if (!value) {
         throw new Error(`Cannot find '${exportName}' in '${modulePath}'`);
     }
-
-    return value;
 }

ng-sample/package.json

@@ -60,4 +60,4 @@
   "scripts": {
     "tslint": "tslint --project tsconfig.json --config tslint.json"
   }
-}
+}

tests/app/lazy-loaded.module.ts

@@ -1,19 +1,42 @@
-import { NgModule } from "@angular/core";
+import { Component, NgModule } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
+import { Page } from "ui/page";
 
+import { lazyLoadHooksLogProvider } from "./main";
 import { SecondComponent } from "./second.component";
 
 const routes = [
     { path: ":id", component: SecondComponent },
 ];
 
+@Component({
+    selector: "modal-lazy-comp",
+    template: `<Label text="this is lazily loaded modal component"></Label>`
+})
+export class ModalLazyComponent {
+    constructor(public params: ModalDialogParams, private page: Page) {
+        page.on("shownModally", () => {
+            const result = this.params.context;
+            this.params.closeCallback(result);
+        });
+    }
+}
+
 @NgModule({
-    declarations: [SecondComponent],
+    declarations: [
+        SecondComponent,
+        ModalLazyComponent
+    ],
+    entryComponents: [ModalLazyComponent], // when lazily loaded and opened via modal on demand
     imports: [
         NativeScriptModule,
         NativeScriptRouterModule,
         NativeScriptRouterModule.forChild(routes)
+    ],
+    providers: [
+        lazyLoadHooksLogProvider
     ]
 })
 export class SecondModule { }

tests/app/main.ts

@@ -49,7 +49,7 @@ const singlePageHooksLogProvider = { provide: HOOKS_LOG, useValue: singlePageHoo
 const multiPageHooksLog = new BehaviorSubject([]);
 const multiPageHooksLogProvider = { provide: HOOKS_LOG, useValue: multiPageHooksLog };
 const lazyLoadHooksLog = new BehaviorSubject([]);
-const lazyLoadHooksLogProvider = { provide: HOOKS_LOG, useValue: lazyLoadHooksLog };
+export const lazyLoadHooksLogProvider = { provide: HOOKS_LOG, useValue: lazyLoadHooksLog };
 
 @NgModule({
     bootstrap: [

tests/app/snippets/icon-font.component.html

@@ -1,12 +1,12 @@
 <!-- >> icon-font-sample -->
 <GridLayout>
     <ListView [items]="glyphs">
-        <template let-item="item">
+        <ng-template let-item="item">
             <StackLayout orientation="horizontal">
                 <Label [text]="item.icon" class="icon"></Label>
                 <Label [text]="item.code"></Label>
             </StackLayout>
-        </template>
+        </ng-template>
     </ListView>
 </GridLayout>
 <!-- << icon-font-sample -->

tests/app/snippets/list-view/template-selector.component.html

@@ -1,11 +1,11 @@
 <!-- >> list-view-template-selector -->
 <ListView [items]="myItems" [itemTemplateSelector]="templateSelector">
-    <template nsTemplateKey="header" let-item="item">
+    <ng-template nsTemplateKey="header" let-item="item">
         <header-component [data]="item"></header-component>
-    </template>
+    </ng-template>
 
-    <template nsTemplateKey="item" let-item="item">
+    <ng-template nsTemplateKey="item" let-item="item">
         <item-component [data]="item"></item-component>
-    </template>
+    </ng-template>
 </ListView>
 <!-- << list-view-template-selector -->