bug: DOM node leakage between standalone routes

[Mohamed-practice]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

I’m experiencing an issue with memory management in my Ionic app. When navigating back and forth between two components, the DOM nodes are not being properly cleaned up, leading to a memory leak. Although the heap memory is not increasing, the DOM nodes remain, causing issues with performance over time.

Expected Behavior

When navigating back and forth between the /home and /time routes, the DOM nodes should be properly cleaned up, and there should be no memory leaks.

Steps to Reproduce

1. In the home.page.html, a button is provided to navigate to the /time route:

<button (click)="routeFront()">RouteFront</button>

2. In the home.page.ts, the routing logic is set up as follows:

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent],
})
export class HomePage {
  constructor(private router: Router) { }

  routeFront(){
    this.router.navigate(['/time']);
  }
}

3. The time.component.html includes a button to route back to /home and an component:

<button (click)="routeBack()">RouteBack</button>
<ion-datetime presentation="date"></ion-datetime>

4. The time.component.ts contains the routing back logic:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { IonDatetime } from '@ionic/angular/standalone';

@Component({
  selector: 'app-time',
  standalone: true,
  templateUrl: './time.component.html',
  styleUrls: ['./time.component.scss'],
  imports: [IonDatetime]
})
export class TimeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {}

  routeBack(){
    this.router.navigate(['/home']);
  }
}

5. The routing is set up in app.routes.ts:

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'home',
    loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
  },
  {
    path: 'time',
    loadComponent: () => import('./time/time.component').then((m) => m.TimeComponent),
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
];

Code Reproduction URL

Ionic Info

Ionic Framework version: "@ionic/angular": "^8.0.0",

Angular version: "@angular/core": "^18.0.0",

Issue.zip

Additional Information

The issue seems to occur when navigating back and forth between the home and time components. I’ve checked the heap memory, and it remains stable, but the DOM nodes persist.

Could you please guide me on how to resolve this issue? Is there something I need to do to ensure proper cleanup of components when navigating away, or am I missing something in the configuration?