Ionic 4 - Angular 6: How to control Ionic router history to stop cache a view component?

Question

Maybe I am missing something, but I'm experiencing a problem with Ionic caching views previously visited, preventing the components from being re-initialized by Angular. The components are pulled from some cache and rendered as whatever data existed previously.

Example:

User A is logged into the application and starts on the 'Home' page with info relevant to user A. User A logs out and navigates to 'Log In'.

User B logs in from the same application and navigates to 'Home' page. Ionic see's that Home was previously visited (by user A) and instead of instantiating 'Home', the view is pulled from cache and displays everything that User A was seing.

I noticed ion-router-outlet adds page transitioning when navigation, and this transition swaps to the left, when the navigation goes "forward" and swipe right when the navigation goes "backwards". This data seems to read from the same history-source that stores cached views.

TL;DR How to control Ionic router history (url tree) from caching the views preventing angular to re-initialize the components?

Answer 1

Had the similar issue 2 days ago. i am now using the ionic lifecycle hook ionViewWillEnter. and by forcing the logic in this hook i achieved my desired results. Let me know if this is helpful :)

Answer 2

I solved my problem using Ionic's life cycle hooks to fire the behavior needed, since Ionic does not destroy og init Angular components from the stack if previously visited. This is a longer topic, and it seems some things in Ionic stack control is not 100% fixed yet. Here are the hooks I routinely implement now to make things work:

1. ngOnInit
2. ionViewWillEnter
3. ionViewDidEnter
4. ionViewWillLeave
5. ionViewDidLeave
6. ngOnDestroy

Answer 3

ionViewWillEnter() will not get called if the URL has not changed. Changing the querystring also doesn't help here. The only workaround I found was to add a variable parameter to the route - e.g.

change

https://localhost:8100/profile?id=123 

to

https://localhost:8100/profile/123

When the 123 changes ionViewWillEnter will be called and the cache busted. Obviously you need to change the routing table accordingly

 const routes: Routes = [
 {      
    ...
    {
                path: 'profile/:id',
                component: ProfileComponent,
                pathMatch: 'full',
              },
        ...