IonRouterOutlet view caching prevents ngOnDestroy during forward navigation

Direct answer

For async subscriptions inside an IonRouterOutlet page, ionViewWillUnload is the authoritative teardown signal, not Angular's ngOnDestroy. ionViewWillLeave tells you the page is navigating away, but the component remains attached to the DOM cache, so it is not a destruction hook. Use ionViewWillLeave to pause or unsubscribe from active streams while the view is cached, and reserve ionViewWillUnload for final disposal when the view is actually removed.

Why ngOnDestroy does not fire on forward navigation

Ionic's IonRouterOutlet keeps component instances in the DOM during forward navigation to preserve scroll position and local state. Because Angular's ngOnDestroy is tied to component destruction, it is deferred until the page is popped from the navigation stack or the stack is explicitly cleared. Heap snapshots confirm the retained instance, but the exact conditions that trigger cache eviction—stack depth, memory pressure, or navigateRoot—are implementation-dependent and not guaranteed by a formal contract.

Recommended cleanup pattern

1. In ionViewWillEnter, start subscriptions or timers that should run while the page is visible.
2. In ionViewWillLeave, unsubscribe from Observables, clear intervals, and close WebSocket connections. The component is still alive, so this prevents background work while the view is hidden.
3. In ionViewWillUnload, perform any final cleanup that must happen when the component is destroyed. This fires when the cached view is actually removed.
4. Do not rely on ngOnDestroy for cleanup in this scenario; it will not run until the stack is unwound.

Race conditions and zone ordering

There is no DOM-detachment race with ionViewWillLeave because the view is intentionally retained. The risk is assuming the component is destroyed when it is only hidden. The exact ordering of Ionic lifecycle events relative to Angular change detection and zone microtasks is not formally specified, so avoid scheduling teardown work in a way that assumes a particular microtask sequence.

Verifying the behavior in your project

Instrument ngOnInit, ngOnDestroy, ionViewWillEnter, ionViewWillLeave, and ionViewWillUnload with console.log, then navigate forward and back. You should see ionViewWillLeave fire immediately, ngOnDestroy remain silent until the stack is popped, and ionViewWillUnload fire only on final removal. A heap snapshot after repeated forward navigations will confirm the instance is retained.

One diagnostic detail that changes the recommendation

Are you using IonRouterOutlet or a standard Angular RouterOutlet, and which Ionic version? Standard RouterOutlet destroys components on navigation, so ngOnDestroy is sufficient. If you are on IonRouterOutlet, the version matters because caching behavior is version-sensitive; confirm the exact version before relying on the pattern above.