Lazy Loading for the Groceries demo app?


I’m trying to see if I can use Lazy-Loading for the groceries demo app ( of NS).

But in the groceries app the app.module.ts file is:

import {NgModule} from "@angular/core";
import {NativeScriptModule} from "nativescript-angular/nativescript.module";
import {NativeScriptFormsModule} from "nativescript-angular/forms";
import {AppComponent} from "./app.component";
import {NativeScriptHttpModule} from "nativescript-angular/http";
import {NativeScriptRouterModule} from "nativescript-angular/router";
import {routes, navigatableComponents} from "./app.routing";

    imports: [NativeScriptModule, NativeScriptFormsModule, NativeScriptHttpModule, NativeScriptRouterModule,
    declarations: [AppComponent, ...navigatableComponents],
    bootstrap: [AppComponent],
export class AppModule
  • But all modules seems to be mandatory at startup. ( or not?)

There is no other custom modules in the groceries app.

Question :

Can Lazy loading still be applied here ? If yes , then for which modules ?


Yes, lazy loading can still be applied, but I guess since this is a relatively small app there was no need to. Although I agree it would be beneficial to folks that are curious about ‘lazy loading best practices’.

Typically you don’t want to lazily load the first page of your app (as it needs to load asap anyway), but any other (deeper) modules can best be lazily loaded. If you want an example, please look at my plugins demo app - all modules bar home are lazily loaded. For instance the Mapping module of which the lazy route is configured here.

While we’re on the subject: I also recommend preloading all modules like so, which means your users don’t have to wait when a lazy route was selected. The preloading happens automatically in background after your app started.


To Which modules would you apply lazy loading ? FORMS ?
How would it look like ? I mean in POV of routes how would it look ?
it’s not my module