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.

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.

• angular
• ionic-framework

1 Answer 1

To effectively manage component lifecycle events when navigating between different parent routes in your app, you can try subscribing to Angular Router events. Specifically, listen for the NavigationEnd event to trigger actions once navigation is complete.

Additionally, implement the OnInit and OnDestroy lifecycle hooks to perform tasks when your component initializes and is destroyed. This combination will help you manage state and execute necessary logic seamlessly across route changes. Ionic lifecycle hooks are not that good at triggering.