How to make the non-lazy-loaded generated pages lazy-loaded again (ionic-angular 3.5.2 + app-scripts 2.0.2)

Ionic Framework ionic-v3
1

Newly released Ionic (ionic-angular) 3.5.2 and app-scripts 2.0.2 changed the behaviour of ionic generate page (or ionic g page) to not generate lazy loaded pages any more, but do it like Ionic 2.x did it. That means no more IonicPage() in the page.ts and no page.modules.ts file at all.

@mhartington already addressed that this is a temporary thing and the possibility to lazy load pages will come back:

The reasons for this change were also documented by him in a Github issue:

We did this because the base starters are not setup for lazy loading. Which is fine, but when a new user tries to generate a new page, they’ll get ngModule and @IonicPage right away. Since this can be confusing, we disabled the auto-generation of ngModule for the time being. I hope to have a more interactive setup soon that will prompt the user if they want this page lazy loaded or not.

module.ts file missing with 4.0.0 · Issue #1105 · ionic-team/ionic-app-scripts · GitHub

But as there already popped several threads up, I thought it would be good to document what has to be changed to the new generated pages to get back to the state before.

After you use ionic g page foo these are the steps to get back to the “before” state:

  1. Open the generated foo.ts and add a @IonicPage() line before @Component({.
    Also add “IonicPage” to the components being imported from ionic-angular:
    import { IonicPage, NavController, NavParams } from 'ionic-angular';

  2. Create a new file foo.module.ts with this content:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FooPage } from './foo';

@NgModule({
  declarations: [
    FooPage,
  ],
  imports: [
    IonicPageModule.forChild(FooPage),
  ],
  exports: [
    FooPage
  ]
})
export class FooPageModule {}

(Replace all occurences of “Foo” or “foo” with the actual name of your page of course)

And that’s it, now you have what older versions of Ionic used as templates for generated pages. You can now work with it as before.

And when Ionic is done with the work, there will be an option to choose between the current and this setup (or even better) when generating pages :champagne:

7 Likes
2

Generating lot of pages and manually updating each of them may not be an ideal solution.

The easy approach will be to use > @ionic/app-scripts version 2.0.0 in the package.json file

"devDependencies": {
    "@ionic/app-scripts": "2.0.0",
    .........
  },

The support for lazy page loading is removed in the version > @ionic/app-scripts version 2.0.1 so any version below 2.0.1 will generate xxx.module.ts

Change Log for ionic/app-scripts

3

That will not work with current versions of ionic-angular as the template app-scripts is using is part of the framework. You would have to pin that one as well to a former version (that of course has bugs, as older app-scripts versions do - that’s why there are newer ones available).

4

I do not believe exporting the page component is required.

5

Would have been great to add an argument such as --lazy to allow generating pages which support lazy loading. As stated some people got confused seeing new generated pages having .module.ts in their pages folder but creating pages and manually adding lazy loading is time-consuming.

1 Like
6

@e_kom, please read the @mhartington quote in my first post in this topic. This (or something similar) is of course exactly what will happen, sooner or later.

7

For some context, this has been merged and should be available in the next release

2 Likes
8

Actually hoped they didn’t remove it completely in first place . Hope in future new functionalities some people are not familiar with but which are very helpful (such as generating lazy loading pages directly) will not be completely removed from one release to another but made optional. Until next release we have to do it manually or create a script to do it.