Converting a modularised app to Lazy Loading

@richardshergold wrote:

I’m working on a fairly complex application (approx 50+ page components) and would like to look at using Lazy Loading now to see if the app startup time can be improved a little bit. I have been reading up on Lazy Loading and have seen blog posts like this one from Ionic. However, I’m having problems getting my head around implementing this for a slightly more complicated app like mine. I already have the application separated into modules (based loosely on the Angular style guidelines [here])(https://v2.angular.io/docs/ts/latest/guide/style-guide.html).

In my applications I have 13 feature modules. As an example, I have a Settings module which seems a pretty good candidate for lazy loading as the user will probably only need it occasionally. The Settings module itself contains a list of sub-components and it’s structure currently looks like this:

pmx-ionic.png362x820 36 KB

the settings.module.ts file looks like this, with each of these sub-components imported:

// framework imports
import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';

// components
import { SettingsComponent } from "./settings/settings.component";
import { ChangePasswordComponent } from "./change-password/change-password.component";
import { ConnectionsComponent } from "./connections/connections.component";
import { NotificationSettingsComponent } from "./notification-settings/notification-settings.component";
import { PersonalDetailsComponent } from "./personal-details/personal-details.component";
import { PinSettingsComponent } from "./pin-settings/pin-settings.component";
import { PinChangeComponent } from "./pin-settings/pin-change/pin-change.component";
import { RateUsComponent } from "./rate-us/rate-us.component";

// components array
export const myComponents = [
  SettingsComponent,
  ChangePasswordComponent,
  ConnectionsComponent,
  NotificationSettingsComponent,
  PersonalDetailsComponent,
  PinSettingsComponent,
  RateUsComponent,
  PinChangeComponent
];


@NgModule({
  imports: [IonicModule],
  declarations: [
    ...myComponents
  ],
  entryComponents: [
    ...myComponents
  ]
})

export class SettingsModule {}

The sub components are all imported into settings.component.ts which displays then in a list for the user to click on so I have:

import { PersonalDetailsComponent } from '../personal-details/personal-details.component';
import { ConnectionsComponent } from '../connections/connections.component';
import { NotificationSettingsComponent } from '../notification-settings/notification-settings.component';
import { PinSettingsComponent } from '../pin-settings/pin-settings.component';
import { ChangePasswordComponent } from '../change-password/change-password.component';
import { RateUsComponent } from '../rate-us/rate-us.component';
import { LoginComponent } from './../../login/login/login.component';

in my app.module.ts file I import the settings module i.e

import { SettingsModule } from "./feature-modules/settings/settings.module";

In my application when the user clicks on the Settings option on the side-menu I open the Settings component so in my app.component.ts file I import that component:

import { SettingsComponent } from "./feature-modules/settings/settings/settings.component";

and then reference it later:

this.nav.setRoot(SettingsComponent);

So my question is, what would be considered the best way of implementing Lazy Loading for my 12 feature modules such as the Settings module?

Do I follow the standard Lazy Loading pattern that is used for pages e,g create a module file for each component within my Settings module e.g change-password-component.module.ts and so or is there a better way of lazy loading a whole module itself rather than each individual component? Thanks for reading!

Posts: 1

Participants: 1

Read full topic