NativeScript (Angular) — Lazy Loading Modals

William Juan
Sep 9, 2018 · 2 min read

Modals can also be lazy loaded!

A lazy loaded modal is structured like any other lazy loaded module. It needs the module and -routing.module files in order for them to be loaded.

Folder Structure for modal

|-- myModal
|-- myModal-routing.module.ts
|-- myModal.module.ts
|-- myModal.component.ts
|-- myModal.component.html

First you will need a myModal-routing.module.ts which is just like any other regular module’s routing.module.

myModal-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { MyModalComponent} from "./myModal.component";const routes: Routes = [
{ path: "", component: MyModalComponent }
];
@NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class MyModalRoutingModule {
}

Then you will need a myModal.module.ts. There are a few extra imports and declarations here to make this work. If you see the code below, you can see the following

  • We imported ModalDialogParams from "nativescript-angular/directives/dialogs
  • An entryComponents section in NgModule which contains the modal’s component
  • A providers section in NgModule which has the provide and useFactory properties
  • A function modalParamsFactory() which returns new ModalDialogParams which gets called in useFactory

myModal.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
import { MyModalRoutingModule } from "./myModal-routing.module";
import { MyModalComponent } from "./myModal.component";
export function modalParamsFactory() {
return new ModalDialogParams({}, null);
}
@NgModule({
imports: [
NativeScriptCommonModule,
NativeScriptFormsModule,
MyModalRoutingModule
],
declarations: [
MyModalComponent
],
providers: [
{ provide: ModalDialogParams, useFactory: modalParamsFactory }
],
entryComponents: [
MyModalComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class MyModalModule {}

Loading the Lazy Loaded Modal

Although the module is lazy loaded, we still have to import the component (not the module, just the component) in places where you want to display the modal.

For example, I want to display this modal in a page called home. My home.component.ts would have to import the modal’s component like so:

import { MyModalComponent } from "./myModal/myModal.component";

We will also need to import a few other modules in order to load the modal

import { ViewContainerRef, NgModuleFactory, NgModuleFactoryLoader } from "@angular/core";
import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";

Inside your constructor

constructor(
private modal: ModalDialogService,
private vcRef: ViewContainerRef,
private moduleLoader: NgModuleFactoryLoader
){}

Now we should be ready to load the modal and display it. To do that we need to first load the module using NgModuleFactoryLoader, followed by actually displaying the modal using ModalDialogService.

openModal() {
this.moduleLoader.load("PATH_TO_MODAL'S_MODULE#MODULENAME").then(
(module: NgModuleFactory<any>) => {
const moduleRef = module.create(this.vcRef.parentInjector);
this.modal.showModal(MyModalComponent,{
moduleRef,
fullscreen: true,
viewContainerRef: this.vcRef,
context: {}
}).then(
res => {
// when modal is closed
});
});
}

You will also need to add the path to the modal’s module to your routing file

{ path: "my-modal", loadChildren: "PATH_TO_MODAL'S_MODULE#MODULENAME" }

Here is a link to a playground sample and here is a link to just the code.

This post is based on NativeScript’s tests-app-ng’s implementation of lazy loading modals.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade