Lazy Loaded module cant have mutiple pages

Ionic Framework ionic-v3
1

Is that possible for lazy loaded module to have multiple pages . If i do so… im getting error like “add page to entry component”.

Example: Tabbed lazy loaded module is my issue here. Any idea and suggestion on this.

1 Like
2

Any update on this? Is it possible or not?

1 Like
3

I had an idea some time ago of using more than one IonicPageModule So like:

@NgModule({
  declarations: [
    Page1,
    Page2,
  ],
  imports: [
    GlobalFooterModule,
    IonicPageModule.forChild(Page1),
    IonicPageModule.forChild(Page2),
  ],
  exports: [
    Page1,
    Page2
  ]
})
4

But does this worked? I have tried like this but when i push a page it is showing me error of
missing entry in entryComponents or invalid links

5

I completely forgot ionic won’t allow you to have 2 @IonicPage in the same file.

But here’s a fix to your error.

[tab Root] ="‘PageName’"

Concatenate the quotation marks with more quotation marks so it knows its a string.

6

@sankarantony @hardikdg Remember to use strings instead of references both when using navCtrl and tabRoot like @trevaun23 said.

If you want to use lazy loaded pages in the same module, tough, Ionic doesn’t allow that, and I consider one component per module a best practice.

This doesn’t mean that lazy loading every single page is good (in angular you could create a lazy loading feature module and import all page modules related to the feature).

If you are creating an app (not a web app) the lazy loading shouldn’t make to much a difference tough (because the files are local). It could still cause a fast blink before the page is loaded tough.

To address your question, tough I’m not sure, its highly probable that importing a page module into another page module will include both in the same chunk:

page-a.module.ts:

@NgModule({
  declarations: [
    PageA
  ],
  imports: [
    IonicPageModule.forChild(PageA)
  ],
  entryComponents: [
    PageA
  ]
})
export class PageAModule {}

page-b.module.ts:

@NgModule({
  declarations: [
    PageB
  ],
  imports: [
    IonicPageModule.forChild(PageB)
  ],
  entryComponents: [
    PageB
  ]
})
export class PageBModule {}

tabbed-page.module.ts:

@NgModule({
  declarations: [
    TabbedPage
  ],
  imports: [
    PageAModule,
    PageBModule,
    IonicPageModule.forChild(TabbedPage)
  ],
  entryComponents: [
    TabbedPage
  ]
})
export class TabbedPageModule {}

Take a look at TabbedPageModule: it imports PageAModule and PageBModule.

Build the app (or run ionic serve), and see if in the generated chunks (0.js, 1.js.…) in the /www/build/ folder the 3 pages above are in the same chunk (like, all of them in 3.js, and none of them in any other file).

You can search in the folder using your IDE/Editor for PageAModule, for example, and see if it is in only one chunk. Then search for PageBModule and TabbedPageModule and see if they are in the same chunk.

I use this approach to use IonicPage and load the initial pages of my app (Home (not logged) and Dashboard (logged)) without lazy loading by just declaring them in AppModule (I see the modules in main.js). I never tried importing in another lazy loaded module but should work.

2 Likes