Angular router Navigate not working with lazy loading - lazy-loading

Question

In my Angular 13 Ionic 6 I am attempting to navigate to the "home" page.
Running on Android.
Here's the component code (signup) that is calling the navigation (abbreviated):
import { Component, OnInit, NgZone } from '#angular/core';
import { Router } from '#angular/router';
constructor(
private route: Router,
private zone: NgZone,
) { }
routeBasedOnRole(role: number) {
console.log('Routing based on role: ', role);
this.route
.routeReuseStrategy
.shouldReuseRoute = function () {
return false;
};
if (role==2) {
//Helper
this.zone.run(() => {
this.route.navigate(['/my-invitations']);
})
} else {
//Learner or both
console.log('Routing to home now');
this.zone.run(() => {
this.route.navigate(['/home'])
.then(nav => {
console.log(nav); // Always returns true
}, err => {
console.log(err)
});
})
}
}
In the app-routing.module.ts routes array, for the 'home' path, when I route to the:
component: HomePage
The routing is executed OK.
However, when I lazy load the route:
loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
...the screen does not route - it stays in the calling component.
The route.navigate() promise always returns true regardless.
Here's the app-routing.module.ts:
import { NgModule, Component } from '#angular/core';
import { CommonModule } from '#angular/common';
import { PreloadAllModules, RouterModule, Routes } from '#angular/router';
import { HomePage } from './home/home.page';
import { SignupPage } from './signup/signup.page';
import { HelpersPage } from './helpers/helpers.page';
import { AddHelperPage } from './helpers/add-helper/add-helper.page';
import { MyInvitationsPage } from './my-invitations/my-invitations.page';
import { InvitationsResponsesPage } from './invitations-responses/invitations-responses.page';
import { ChatPage } from './chat/chat.page';
import { SettingsPage } from './settings/settings.page';
import { FeedbackPage } from './feedback/feedback.page';
const routes: Routes = [
{
path: 'home',
//loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
component: HomePage
},
{
path: 'signup',
loadChildren: () => import('./signup/signup.module').then( m => m.SignupPageModule)
//component: SignupPage
},
{
path: 'helpers',
loadChildren: () => import('./helpers/helpers.module').then( m => m.HelpersPageModule)
},
{
path: 'add-helper',
loadChildren: () => import('./helpers/add-helper/add-helper.module').then( m => m.AddHelperPageModule)
},
{
path: 'my-invitations',
loadChildren: () => import('./my-invitations/my-invitations.module').then( m => m.MyInvitationsPageModule)
},
{
path: 'chat',
loadChildren: () => import('./chat/chat.module').then( m => m.ChatPageModule)
},
{
path: 'invitations-responses',
loadChildren: () => import('./invitations-responses/invitations-responses.module').then( m => m.InvitationsResponsesPageModule)
},
{
path: 'settings',
loadChildren: () => import('./settings/settings.module').then( m => m.SettingsPageModule)
},
{
path: 'feedback',
loadChildren: () => import('./feedback/feedback.module').then( m => m.FeedbackPageModule)
},
];
#NgModule({
declarations: [
HomePage,
SignupPage,
HelpersPage,
AddHelperPage,
MyInvitationsPage,
InvitationsResponsesPage,
ChatPage,
SettingsPage
],
imports: [
CommonModule,
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Btw, the signup page that is calling for the route, is itself lazy-loaded OK from the app.component using the same route.navigate() call. It seems that maybe subsequent routings to lazy-loaded pages are not executing?
Have looked through many similar questions - to no avail.
What am I missing?