Component not destroyed after Reload + Navigating to another page

Question

In an Ionic v4 app, ngOnDestroy is not called when I refresh the page and then navigate back to another page by calling Router.navigateByUrl().

Based on this answer, I tried to destroy the page on reload by applying @HostListener("window:beforeunload") on ngOnDestroy, but the problem that I am facing is different in the way that what I need is that the page needs to be destroyed AFTER it was refreshed AND THEN navigating to another page.

This demo shows my problem, and these are the steps to reproduce it:

1. Access the app: The app loads automatically to the parent page, which is the first and only tab in the demo
2. Navigate to the child page by clicking the button 'Navigate to Child': The child page is then opened
3. Reload the child page by going to the bar address in the in-app browser, clicking inside it, and then hit the enter key (Don't use the reload button because it reloads the app and points directly to the parent page)
4. Navigate back to the parent page by clicking the button 'Navigate Back to Parent'

In the last step, the console doesn't log that the child page is destroyed, and when accessing it again from the parent, it doesn't log neither that it is initialized. Which means that the child page is not destroyed.

Please note that in the case when the child page is not refreshed and by clicking the 'Navigate Back to Parent' button, the child component is destroyed (ngOnDestroy is called), and then created/initialized in the next access.

Answer 1

I found one strange thing whenever the component initialized after router refreshed, that component not destroyed in Ionic.

I tried the below manner. After refreshed the child component.

1. Implement the OnInit and OnDestroy in parent component.
2. Then Hit enter in child component and then click on 'Navigate to Parent component'
3. After that I clicked on Navigate to child component. Here It shows 'Parent component Initialized and Parent component Destroyed' in that console.`

export class Tab1Component implements OnInit, OnDestroy {

    constructor(private router: Router) {}

    navigatToChild() {
      this.router.navigateByUrl("/tabs/tab1/child")
    }

    ngOnInit() {
      console.log("Parent component initialized")
    }

    @HostListener("window:beforeunload")
    ngOnDestroy() {
      console.log("Parent component destroyed")
    }
}