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

@Sujan12 wrote:

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.

https://github.com/ionic-team/ionic-app-scripts/issues/1105#issuecomment-314714328

---

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

Posts: 1

Participants: 1

Read full topic