Angular router Navigate not working with lazy loading

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?