preventDefault inside passive event listener Angular

[drprocter]

Hello, I am facing an issue within my angular webapp where my console log keeps on giving me the following error message: preventDefault inside passive event listener invocation
It seems that I cannot override the default browser behaviour and this leads to some slight stuttering which kind of removes the whole purpose of the library. I wanted to ask whether anyone else had faced a similar issue or could give me a clue on how I can prevent this from happening. My first instict was that it has something to do with the way Angular loads things in the DOM and that I needed to make a change in one of the lifecycles but after sevaral failed attempts I am back to square one.

[axherrm]

Got the same error with Angular 17.1.2 & Lenis 1.0.33

In Chrome your mentioned error gets spammed when scrolling:

In Firefox just a simple warning on the first scroll:

In earlier versions of my project those errors/warning did not occur, this is the commit that introduced them: axherrm/WebCVTemplate-core@64ce430

Weird thing is I did not make any big changes, mostly only restructured code

[kalves]

Hi,
I was facing the same issue as @axherrm after updating Angular from v14 to v16.2.15 & Lenis v1.1.13.
After check, that was an issue related to Angular not Lenis. It's a waste to try to solve this error in your component.

According to the documentation here, to prevent this behavior, you need add the following line before import 'zone.js'.

(window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'wheel'];

Solved for me !
Hope it helps

[jsuyog2]

Hello,

Angular Version: 18.2.4
Node Version: 22.3.0

I encountered a similar issue and was able to resolve it by using zoneless change detection in Angular. You can try it by following the steps outlined in the official Angular guide on running Angular without ZoneJS (Zoneless).

This worked perfectly for me! I hope it helps others as well.

[kalves]

Hi,

Yes, @jsuyog2, I've just done it. Unfortunately, Angular 18 in zone-less mode is not yet compatible with applications using server-side rendering with Hydration. Currently, zone-less is in an experimental state, so for my case, and for others in the same situation, the workaround I mentioned earlier is still helpful.

Thanks anyway for the advice! ;-)