Ionic Angular lifecycle hooks are not triggered when a page is "pushed"

I have nested routes in my Ionic-Angular app. When I navigate from one child route to another child route within the same parent route, the Ionic lifecycle hooks work as expected. But when navigating to a different parent route, no lifecycle hook is fired - neither from Ionic nor from Angular.

Here is my routes setup:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: ':entityId', component: HomeComponent },
{
path: 'account/entity',
component: DashboardPage,
data: { tab: Tab.Business },
canActivate: [authGuard],
children: [
{ path: '', redirectTo: 'pages', pathMatch: 'full' },
{ path: 'pages', component: PagesComponent, canActivate: [entityGuard] },
{ path: 'pages/:entityId', component: EntityReadComponent, canActivate: [entityGuard], canDeactivate: [cleanupGuard] },
{ path: 'subscription', component: SubscriptionComponent, canActivate: [entityGuard] },
]
},
{ path: '**', component: NotFoundComponent, data: { tab: Tab.None } }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }


The DashboardPage component is a custom tabs component that simply routes to different pages by using routerLink.

Inside my EntityReadComponent file I have this:

export class EntityReadComponent implements ViewDidEnter {
ionViewDidEnter() {
console.log('vied entered...');
}
}


The ionViewDidEnter lifecycle hook will fire when navigating to a sibling route, let's say, to subscription, but will not fire when navigating to /:entityId.

I use Angular version 18 and Ionic version 8.4.1.

Continue reading...