nested routing in ionic angular

Question

I'm using Ionic 4

I have structured my application in pages having following heirary

| app
  |- tabs
     |- tabs.page.ts
     |- tabs.module.ts
     |- tabs.routing.module.ts
  |- pages
     |- profile
        |- profile
           |- profile.module.ts
           |- profile.page.ts
        |- profile.module.ts
        |- profile-routing.module.ts
     |- pages.module.ts
     |- pages-routing.module.ts
  |- app.component.ts
  |- app.module.ts
  |- app-routing.module.ts

The content of app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'tabs', pathMatch: 'full'},
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule', canActivate: [AuthGuardService]},
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Then, tabs.routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    loadChildren: '../pages/pages.module#PagesModule'
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Which further loads PagesModule and content of pages-routing.module.ts

const routes: Routes = [
    { path: '', redirectTo: 'profile', pathMatch: 'full'},
    { path: 'profile', loadChildren: './profile/profile.module#ProfileModule'},
];
@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class PagesRoutingModule {}

and the content of profile-routing.module.ts

const routes: Routes = [
    { path: '', loadChildren: './profile/profile.module#ProfilePageModule'},
];
@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class ProfileRoutingModule {}

But on visiting

/tabs/profile

It gives error as

ERROR Error: "Uncaught (in promise): Error: Cannot find 'ProfilePageModule' in './profile/profile.module'

Replacing { path: '', loadChildren: './profile/profile.module#ProfilePageModule'}, in profile-routing.module.ts with { path: '', component: ProfilePage} is working.

Answer 1

Why do you have two "profile.module.ts" files in the profile directory? When you lazy load, be sure that your loadChildren path is pointing to the file that has the "ProfilePageModule" exporting within it, given your error I am assuming that you are pointing to the incorrect "profile.module.ts"

I would say that { path: '', component: ProfilePage} is working since that is eagerly loading, without a demo project to review the code it is hard to tell, but have you tried:

const routes: Routes = [
    { path: '', loadChildren: './profile.module#ProfilePageModule'},
];
@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class ProfileRoutingModule {}