Ionic 5: Generates pages differently!

Ionic Framework
1

Can someone explain why now it is loading pages with a page-routing.module.ts. and all pages in the app-routing.module.ts:

{
path: ‘’,
loadChildren: () => import(’./page/page.module’).then(m => m.PagePageModule)
}

I want to make tabs but I cannot without deleting the tab1-routing.module.ts page and setting the RouterModule in the tab1.module.ts. Is there a way to create a page without the routing-module in it?

2

Hi,
am I understanding it right, you are asking why the pages are generated the way they are?

Each page has its own module + routing module so it can be easily lazy loaded.
If you do not want this (but want eager loading instead), you can remove its module and include it in the parent (e.g. declare tab-pages with routes in their parent). Or generate it directly without a module:

ionic generate page TabExample --no-module
3

With or without the --no-module flag I get the same result. In app-routing.module.ts the cli command adds the following line:

loadChildren: () => import('./page/page.module').then(m => m.PagePageModule)

while previously it would add:

path: 'page', loadChildren: './page/page/page.module#PagePageModule'

The way page.module.ts is generated has changed as well: the following lines are missing:

const routes: Routes = [
  {
    path: '',
    component: PagePage
  }
];

and inside the imports array

RouterModule.forChild(routes)

is missing while it has added (and generated) PagePageRoutingModule.

I find it quite confusing because I thought that in the old approach pages were lazy loaded as well. This leaves me with the following questions:

  1. Are pages indeed lazy loaded int the old approach.
  2. If so, why this change.
  3. Should I restructure my existing pages to use the new approach.
4

This is the only part I can say anything about, and I’d say “no”. Angular is very accommodating of project structuring conventions. Feel free to stick with whatever organizational structure you like.

5

I think if i’m remembering right, from Angular 9+ you must use LazyLoading like this:

loadChildren: () => import('./page/page.module').then(m => m.PagePageModule)

as the old Way is not supported anymore?