Patching zone.js doesn't enable passive event listeners

Question

I've written this demo component :

(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];
import 'zone.js';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  standalone: true,
  template: `
    <h1>Hello from {{name}}!</h1>
    <div class="foo" (scroll)="onScroll($event)">
        <div class="bar">lala</div>
    <div>
  `,
  styles: [
    'div.foo { overflow: auto; height: 50vh; }',
    'div.bar { height: 200vh; background: beige; }',
  ],
})
export class App {
  name = 'Angular';

  onScroll(e: any) {
    e.preventDefault(); // should error in the browsers console.
    console.log('scroll');
  }
}

bootstrapApplication(App);

Per this doc, it should enable passive event listeners but it doesn't. (No error is the console).

Any idea what I'm missing ?

Stackblitz demo

Answer 1

For it to works, the flag requires to be in an external file.

• zone-flags.ts : (window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];

• main.ts: import './zone.flags';