Zone. Js Violation Warnings on Console in Angular Project Only on Chrome
I've an Angular 4 Project Created Using @Angular/Cli, When Running the Application in Development Mode, I Receive Those Warnings in the Console: Zone. Js:1489...
I've an Angular 4 project created using @angular/cli, when running the application in development mode, I receive those warnings in the console:
zone.js:1489 [Violation] 'setTimeout' handler took 209ms
2[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
2zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
2zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
The weird thing is that warning appear on Chrome only. (my chrome build version is: 58.0.3029.110)
- What does those (violation) warnings mean?
- Is this harmful to application performance?
- How to disable/override or configure zone.js to remove those warnings?
1 Answer
Must Read
What is a passive event?
Passive event listeners are a new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners. Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault. This feature shipped in Chrome 51, Firefox 49 and landed in WebKit. Reference.
Chrome throws the warning ...
[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
...when you bind to mouse scroll events, to essentially warn that you may have inhibited scroll performance in your event or disabled default events by making a call to preventDefault().
Chrome also throws the error when you try and still call preventDefault() in a passive event.
Unable to preventDefault inside passive event listener invocation.
Firefox has a similar error for this, however does not seem to throw a warning like Chrome:
Ignoring ‘preventDefault()’ call on event of type ‘wheel’ from a listener registered as ‘passive’.
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
