NativeScript (Angular) — Lazy Loading Modals
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.htmlFirst 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
ModalDialogParamsfrom"nativescript-angular/directives/dialogs - An
entryComponentssection inNgModulewhich contains the modal’s component - A
providerssection inNgModulewhich has theprovideanduseFactoryproperties - A function
modalParamsFactory()which returnsnew ModalDialogParamswhich gets called inuseFactory
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.
