Angular 10: ngOnInit not firing in the deployed app version in Firefox when navigating back from the external URL with browser's back button

Question

I see that the life cycle of the deployed Angular application looks different in Firefox.

There is a pretty trivial code of the app component:

export class AppComponent implements OnInit {
  public ngOnInit(): void {
    console.log('OnInit');
  }
}

Its html is also simple:

<a href="https://angular.io">Bring me to external URL</a>

I expect the following scenario. A user opens the application, sees 'OnInit' in the console, navigates by the link, clicks the back button and sees the new 'OnInit' message in the console (or the second one if the log is preserved).

It works so if I run the application locally with ng serve in any browser.

But it looks different if I build the application with ng build --prod, deploy it (e.g. using a command-line http server) and open it in Firefox. I still see 'OnInit' appearing in the console when I load the application. But nothing happens when I click the link and come back. The code inside of OnInit is not reached. Looks like the component or entire page is not reloaded, FF renders the previous state.

It causes some nasty problems. For example, when a user goes back from the third-party OAuth login page, they see the wrong state of the previous screen.

I also checked the navigation inside of the application. It perfectly works everywhere for internal URLs.

Could you explain to me why it happens and how to get the OnInit in Firefox?

I found the similar thread on GitHub. But the Angular team doesn't think that it is a framework's problem.

Answer 1

The issue is caused by Angular not running lifecycle hooks when you 'return' to your app from the external URL.

@HostListener("document:visibilitychange", ["$event"])
handleVisibilityChange(event: any): void {

    // Handle stuff

    }
}

Code from Why don't lifecycle hooks run when changing tabs in my app?