Am I stupid or is IONIC 3 lazy loading stupid

Ionic Framework ionic-v3
1

Hi everyone,
I have developed few Apps using IONC 1, and I liked it, after the move to Ionic 2 I was a little bit afraid of the transaction and decided to keep using ionic 1 and just wait,
for a while now, after IONIC 3 was out, I had a deep look into it and I seemed to like it especially after reading about lazy loading Pages and components (the concept), and I’m developing my first IONIC 3 app lazy loading my pages,
the thing is, Do I really need to create a module for every page and import every Lib/Module I need to use again and again and again for each page?
do I really need to use different navigation for each module separately in order to be able to lazy load it or am I doing it wrong?
if the asnwer is Yes, Why?
if the answer is No, then How?
what are the standards?

2

Sounds like you’re doing it wrong.

If you have your page controller .ts file and an accompanying .module.ts file, then all you have to do is on another page do
navController.push("name-of-page-class-in-a-string");.

For example, say you have the HomePage class, then you’d do:
navController.push("HomePage");

No need to import the module anywhere.

3

maybe I explained myself wrong, I know about the nav thing you mentioned, but what I actually meant is,
while I have a Navigation function on App.component, why would I write another function in page.component to do that, can’t I simply inherit from "parent"
for example storage, session etc… do I need to import a provider or a module in every page to access those things, or can I in some way keep them in one place and use them everywhere, without re-importing them … am not sure if I’m explaining it correctly still…

4

What I actually do is to import all providers in app.module.ts. After that when you create a lazy loaded page, you must import IonicPageModule.forChild(YourPage). This import will provide everything you already declared on app.module.ts.

5

That sounds like what I’m looking for,
sir can you please provide a code snippet to demonstrate your idea,
what would the folder/file structure be like in that case, do I still need a page module?

6

@imadbakir

Yes, you still need a module per page.

One of my lazy loaded pages module (survey.module.ts)

@NgModule({
    declarations: [SurveyPage],
    imports: [
        JWBootstrapSwitchModule, // Example of a third party module im using only on this page, so it's loaded only here
        IonicPageModule.forChild(SurveyPage) // Here is where your page will inherit app.module.ts payload
    ],
    exports: [SurveyPage]

})
export class SurveyPageModule {}

Any page is set in a separate folder, composed of 4 files.

  • survey.ts
  • survey.scss
  • survey.html
  • survey.module.ts

My app.module.ts looks like this:

@NgModule({
    declarations: [
        MyApp
    ],
    imports: [
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [Http]
            }
        }),
        BrowserModule,
        ReactiveFormsModule,
        HttpModule,
        IonicModule.forRoot(MyApp),
        IonicStorageModule.forRoot(),
    ],
    exports: [],
    bootstrap: [IonicApp],
    entryComponents: [MyApp],
    providers: [
        AndroidPermissions,
        DatabaseService,
        DatabaseConnectionService,
        TransactionService,
...
...
...
...
rest
]

You can import all providers in another file and import this file here. It’s up to you.

best regards

7

There is an issue on github about lazyloading multiple pages at once, but they closed it and ignore it even though a lot of people need this feature…

8

Check here simple steps to convert Non Lazy to Lazy Loaded App It also proves great tip to optimize app Startup time in real Devices