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:
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!
