Ionic 3 New Pages Lazy Loading

Page Lazy Loading is awesome.
I never start a tuts like this, but f*** yea!

This new feature from Ionic 3 not only makes our code more concise but also avoid the hassle of typing every damn time the same paths in every Class!
Lazy Loading allows us to access Pages wherever we want by only using a string.

We are going to see how things were before and how they got improved.

The old way

First let’s go to the terminal to create the Ionic app:

This generates a normal Ionic 3 app with the following imports in the app.module.ts:

Every time we create a Page, we need to add it there in the app.module.ts.

Same for the Main Component:

When setting  the rootPage property, an import of the Page is required.

Same trivial task for the navigation:

Here we need to make an import of the AboutPage before being able to navigate to it, it’s not awesome …

A New Hope

As you can see, when creating an app, the generated Pages are not lazy loaded by default.
Let’s start by creating one using this command in the terminal:

Great!
Now we have a new OptionsPage created for us.

The Page Component is not only a Component anymore:

Ionic now requires a new Decorator in order to do the work : the @IonicPage.
One new Module is generated now, the OptionsModule:

This new Module will import the @IonicPage, export and declare it for us.
The only issue here is that the ionic generate command is not totally up-to-date.
The following line throws an error:

Property ‘forChild’ does not exist on type ‘typeof IonicModule’.

So, we need to replace the IonicModule by the IonicPageModule.
This is how the code should be:

And that’s all we need to do!
No more import in the app.module.ts or anywhere else!

Going back to the home.ts:

We only need to pass a string of where we want to go now!

The other pages (Home, About, Contact) can be recreated now.
We now have one DRY app.module.ts:

Don’t forget to make the conversion in the app.component.ts:

And in the tabs.ts:

Conclusion

I’m lazy and always prefer to have less code, less imports, less paths to remember: The less, the better!
Importing every time the Ionic Pages can sometime kill the fun of developing with Ionic.
Now with Lazy Loaded Pages, we can just generate, sit back and profit.
It’s one of the best feature from Ionic 3, however it’s not (yet) mandatory and its architecture forces us to create a new module for each Page which in my opinion (the less, the better) and others is a big flaw.
Next thing to test will be the performance improvement!

1 Comment

  1. Jacques Nieuwoudt Jacques Nieuwoudt
    April 25, 2017    

    Removing the need to repeatedly import pages everywhere is great, and speeding up the app is always welcome. This new paradigm of referencing pages by a string value seems like a step in the wrong direction though. The advantage of TypeScript’s compiler is being thrown away. You’re losing all type checking for page types in the editor and during compilation. Changing a page name would require updating string values all over the place without any tool that could find references to that page. A workaround could be to have a file with a bunch of `const` strings defined for page names, which would at least ensure consistency for the strings used to reference pages.

Leave a Reply

213 Shares