配置zone.js未启用passive事件监听器的问题排查

我编写了如下示例组件：

(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(); // 预期会在浏览器控制台报错
    console.log('scroll');
  }
}

bootstrapApplication(App);

根据Angular官方文档中绑定passive事件的相关说明，上述配置应该启用passive事件监听器，但实际运行后控制台并未出现预期报错，说明配置未生效。请问我遗漏了什么配置？

问题原因与解决方案 #

问题出在全局变量赋值时机——你需要在import 'zone.js'之前完成__zone_symbol__PASSIVE_EVENTS的赋值，否则Zone.js初始化时不会读取到该配置。

修正后的代码顺序如下：

// 先配置全局变量，再导入zone.js
(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];
import 'zone.js';

// 后续代码保持不变
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
// ... 其余组件与启动代码

当Zone.js初始化时检测到__zone_symbol__PASSIVE_EVENTS包含scroll，就会为该事件注册passive监听器，此时调用e.preventDefault()就会触发浏览器预期的报错（passive监听器不允许阻止默认行为）。

内容的提问来源于stack exchange，提问作者Matthieu Riegler