bug: takeUntilDestroyed does not unsubscribe in Ionic due to ion-router-outlet page persistence

[maniya108]

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

In an Ionic Angular app, when navigating away from a page using , the component is not destroyed. As a result, Angular’s takeUntilDestroyed() and ngOnDestroy() are never called, leaving active subscriptions running in the background. This causes memory leaks and unintended behavior if the observable continues emitting values.

Expected Behavior

Angular’s ngOnDestroy() (and by extension takeUntilDestroyed()) should be called when a page is navigated away from, or Ionic should provide a reliable lifecycle event or configuration to clean up subscriptions automatically.

Steps to Reproduce

Create a new Ionic Angular app using ionic start myApp blank --type=angular.

Generate two pages: PageA and PageB.

In PageA, subscribe to a timer observable like below:

import { Component, inject } from '@angular/core';
import { interval } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-page-a',
  templateUrl: './page-a.component.html',
})
export class PageA {
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(() => console.log('Still alive'));
  }

  ngOnDestroy() {
    console.log('PageA destroyed');
  }
}

Add buttons to navigate from PageA to PageB and back.

Observe that the console.log inside ngOnDestroy and the observable continue running even after navigating away from PageA.

Code Reproduction URL

NA

Ionic Info

Ionic Framework: v8.5.0
Angular: v20.x (latest)
@ionic/angular: 8.x
Browser: Chrome 132
Device: Desktop / Android

Additional Information

No response

[ShaneK]

I don't think this is a bug, I think this is intended behavior with the Ionic router, due to how it works with animations. You cannot use takeUntilDestroyed here, instead you should use takeUntil with an observable that you trigger on an Ionic Lifecycle event like ionViewDidLeave.