CanDeactivate confirm message

Question

I\'ve implemented a CanDeactivate guard to avoid user leave the page during the upload and it works. The problem is that my message is always a default message

Answer 1

Your custom message will only be shown when trying to navigate elsewhere within your Angular app (e.g., navigating from http://localhost:4200/#/test1 to http://localhost:4200/#/test2). This is because the CanDeactivate guard only activates for route changes made via the Angular router, within your Angular app.

When navigating away from your Angular app (e.g., navigating from http://localhost:4200/#/test1 to http://stackoverflow.com, refreshing the page, closing the browser window/tab, etc.), the window beforeunload event activates (due to the @HostListener('window:beforeunload') annotation) and handles the confirm dialog on its own, without the CanDeactivate guard. In this case, Chrome and Firefox display their own pending changes warning message.

You can read more about the beforeunload event and how it works here. You'll notice in the "Notes" section that it states the following:

In Firefox 4 and later the returned string is not displayed to the user. Instead, Firefox displays the string "This page is asking you to confirm that you want to leave - data you have entered may not be saved."

Chrome follows a similar pattern, explained here.

IE/Edge still seem to offer the ability to specify a custom beforeunload message. An example of this can be seen here.