Ionic Angular: ionViewWillEnter vs ngOnInit for Cached Router Pages

The problem with stale data on back-navigation

Ionic's router outlet keeps previously visited pages alive in the DOM. When you navigate away and press back, the page reappears without being recreated. Angular's ngOnInit only fires when a component is first instantiated, so it never runs on that back-navigation return. The result: a list page that doesn't reflect edits made on a detail page, because the list's ngOnInit never re-executes.

Why this matters

If you rely on ngOnInit to refresh data every time a page becomes visible, you'll hit silent failures in Ionic Angular apps. The timing assumption from pure Angular breaks because of Ionic's caching behavior.

The Ionic solution: split your lifecycle

Use ngOnInit for one-time setup: dependency injection, static UI initialization, subscriptions that should start once.

Use ionViewWillEnter (or ionViewDidEnter) for per-visit data refresh: every time the page becomes visible, whether through forward navigation or back navigation.

Worked example: Ionic Angular page component

Here's a minimal pattern. Note that the code is illustrative; actual behavior depends on your Ionic Angular version and route configuration.

import { Component, OnInit } from '@angular/core'; import { IonViewWillEnter } from '@ionic/angular';

Verification checklist

1. Create a two-page Ionic Angular app: a list page and a detail page.
2. Add console.log statements inside ngOnInit and ionViewWillEnter on both pages.
3. Navigate from the list to the detail, then use the back button.
4. Observe the console: ngOnInit should fire once (when the list page is first created) and not again on back navigation. ionViewWillEnter should fire every time the page becomes visible, including on the back navigation return.
5. Check the installed @ionic/angular version in package.json and read its router outlet changelog for any behavior changes between Ionic 5, 6, and 7.
6. Test memory usage by pushing several pages on the navigation stack to validate the caching trade-off on target devices.

Trade-offs and limitations

• Cached pages consume memory and keep component state alive. If you opt out of caching per route or globally, pages re-render from scratch, which adds load time and may reset scroll position.
• Teams should pick one clear convention per page, either ngOnInit for setup or ionViewWillEnter for data refresh, to avoid duplicate requests.
• ionViewWillLeave and Angular's ngOnDestroy may not fire when expected because cached pages stay mounted until popped from the navigation stack. Manage subscriptions tied to visibility within the Ionic hooks.

Actionable closing

Start by auditing your Ionic Angular pages: identify which data truly needs to reload on every visit versus which should initialize once. Add console logs or temporary alerts to confirm hook firing order, then migrate per-visit data loading into ionViewWillEnter. Check your Ionic version's router outlet notes, and only disable caching if the memory or staleness cost exceeds the benefit of fresh renders.