I’m looking to upgrade my org’s Ionic stack so we can take advantage of lazy loading. We have multiple features in our app, and each feature has “sub pages”. For instance one module is news, which has sub pages like article. Another feature is events, which has sub pages like create event.
If each page needs to have its own module to lazy load, is it possible to roll those modules into a feature level module, like a NewsModule that imports each news based page’s module, then import the feature level modules into the root module?
IMHO the lazy loading of ionic is a little bit problematic cause of trying to be as simple as possible for beginners. On the one hand it is very easy to use and activate lazy loading. Thats the strength of it. But on the other hand it is not as flexible as angular lazy modules. You can create a feature folder. in it you put a folder for each page with its own lazy module. then group up all providers and stuff like that into one module and load them not lazy. Or if you have only one starting page for that feature (you lazy load the module every time be calling this one page and not another page), you can create a lazy module for that single page and declare all other pages and your other parts of that feature inside of this module.
So if I understood correctly, something like this?
// NewsModule -- Feature level module with lazy-loaded main page and subpages.
@NgModule({
declarations: [
NewsPage
],
imports: [
ArticlePageModule,
NewsFilterModule,
IonicPageModule.forChild(NewsPage),
],
exports: [
NewsPage
]
})
It’s OK if all the pages of the feature become loaded the first time NewsModule is used. We run mobile only and haven’t noticed any significant speed degradation not using lazy-loading, as we do now.
Primarily I’m looking to use this feature for deep-linking, as I cannot utilize NavController.push(string) unless the page is lazy-loadable.
If NewsPage is your only access point to your other news Pages (ArticlePage for example) then create a NewsPageModule, put all child pages inside its declaration and entry component arrays, put the providers that are used by this pages inside the providers array and done. As soon as you navigate to NewsPage, all the stuff gets loaded. You don’t create modules for the child pages in that case (no ArticlePageModule for example).
Bro,Its shows error. Uncaught (in promise): Error: No component factory found for SettingsNotificationPage. Did you add it to @NgModule.entryComponents?
Where lives your SettingsNotificationPage? Is it a child page of NewsPage? Then put it inside your NewsPageModule. If not, it has do be added to another module.
So you added it to the entryComponents and declarations arrays of NewsPageModule and first navigated to NewsPage before navigating to SettingsNotificationPage, right?
You are right, i created a test project and it seems that Ionic works different with modules than Angular. Ionic ignores entryComponents from feature modules (page modules). Then you have to add all pages to your app.module or create a page module for every page. I hope Ionic 4’s new routing module will better support feature modules and lazy loading.
