Router: ability to intercept back button or tab close that would terminate the app

[ ] bug report
[x] feature request
[ ] support request

Current behavior Cannot intercept when the back button or closing the current browser tab will close the app w/o a warning.

Expected behavior Should be able to detect both actions and take appropriate actions. Could be done with router hook or some other means.

I understand that browsers differ in how they handle this but the router should have a way to cope. Barring that, we need documentation to cope.

Minimal reproduction of the problem with instructions

1. Launch routing app running on localhost (e.g., http://localhost:3000)
2. Paste another site into address bar (e.g., google.com)
3. Paste the locally running app into address bar (e.g., http://localhost:3000)
4. Hit the back button

You’ll be taken to google.com w/o interruption.

What is the motivation / use case for changing the behavior?

Don’t lose work or context by accidental over-clicking of back button or closing the tab.

Please tell us about your environment:

• Angular version: 2.2.0
• Browser: all
• Language: all

[matthewdenobrega]

The behavior for window.onbeforeunload changed between 2 and 4:

• In 2 binding to window.onbeforeunload works as expected, and shows a dialog if the handler returns false.
• In 4 the function bound to window.onbeforeunload runs, but navigation happens regardless of what is returned.

I can’t demonstrate this in a plunkr because plunkr binds its own handler to window.onbeforeunload.

The canDeactivate hook is not run when the page is reloaded, so I can’t see a way to block page reloads, for example if there are unsaved changes, in Angular 4. This is something that should be supported as per the original issue. @wardbell

[skreborn]

Should window.onbeforeunload be used for this?