angular: Angular 16 @HostListener('window:beforeunload', ['$event']) is not working

Which @angular/* package(s) are the source of the bug?

Zone.js

Is this a regression?

No

Description

After migration from 15.2.10 to 16.2.* (tried 16.2.3 and 16.2.9) the working approach with showing the default browser preventing reload popup is not working any more. image

Working minimalistic solution (Angular 15) https://stackblitz.com/edit/angular-15-starter-pack-iuvmnk The same solution with Angular 16 (not working) https://stackblitz.com/edit/stackblitz-starters-qhmmsm

Step to reproduce

  • open https://stackblitz.com/edit/stackblitz-starters-qhmmsm with Chromium based browser (Chrome/Edge)
  • wait until the app is built
  • open console
  • click between the header and the link (you will see ‘Changed!’ output in the console)
  • try to reload the page (either the embedded in stackblitz or the browser page - it doesn’t matter, should work the same in both cases)

ER: the default browser preventing reload popup should appear AR: the default browser preventing reload popup doesn’t appear

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-qhmmsm

Please provide the exception or error you saw

The browser doesn't show the default preventing reload popup.

Please provide the environment you discovered this bug in (run ng version)

@angular/core@16.2.9
@angular/common@16.2.9
@angular/animations@16.2.9
@angular/compiler@16.2.9
@angular/forms@16.2.9
@angular/platform-browser@16.2.9
@angular/platform-browser-dynamic@16.2.9

Chrome 118.0.5993.89 64-bit / Chrome 118.0.5993.71 64-bit / Chrome 117.0.5938.132 64-bit / Edge 117.0.2045.60 64-bit

Anything else?

As you can see from the component code if I click on the layout and change it to the changed state I shoud see the default browser popup asking “Reload the site?”, but in Chrome 118.0.5993.89 64-bit / Chrome 118.0.5993.71 64-bit / Chrome 117.0.5938.132 64-bit / Edge 117.0.2045.60 64-bit it doesn’t appear (meanwhile it works in Firefox 118.0.2 64-bit or 15.2.10 version), Win 10. One more mention about the same problem here: https://github.com/angular/angular/issues/50935

About this issue

  • Original URL
  • State: open
  • Created 8 months ago
  • Reactions: 1
  • Comments: 18 (6 by maintainers)

Most upvoted comments

Thanks, for Angular 16 is it not possible to do this? like with a patch?

I have the same issue:

 "@angular/animations": "16.2.11",
"@angular/cdk": "16.2.10",
"@angular/common": "16.2.11",
"@angular/compiler": "16.2.11",
"@angular/core": "16.2.11",
"@angular/flex-layout": "15.0.0-beta.42",
"@angular/forms": "16.2.11",
"@angular/material": "16.2.10",
"@angular/platform-browser": "16.2.11",
"@angular/platform-browser-dynamic": "16.2.11",

Chrome : Version 118.0.5993.88 (Build officiel) (64 bits)

This looks like a duplicate of #47579

@oleh-kazban-gl you might have browser extensions installed that interfere. Try disable extensions / test in the incognito mode.

I haven’t tested it (the Stackblitz links don’t reproduce for me, or at least I don’t know what to do in that repro to reproduce it) but this might potentially be due to zone.js changes; you could try downgrading that and see if it makes a change.