Angular生产构建中双向绑定失效：TypeError "st is not a function"

问题现象 #

项目基于Angular 17，使用应用构建器、独立组件并导入NgModule，开发环境构建运行完全正常，但生产构建后应用崩溃，报错如下：

core.mjs:6373 ERROR TypeError: st is not a function
    at HTMLElement.addEventListener (zone.js:1907:21)
    at n.addEventListener (platform-browser.mjs:785:15)
    at n.addEventListener (platform-browser.mjs:212:21)
    at Dd.listen (platform-browser.mjs:665:30)
    at sf.listen (browser.mjs:4309:26)
    at G0 (core.mjs:24973:34)
    at _t (core.mjs:26820:3)
    at Kle (createAccount.component.html:31:53)
    at o0 (core.mjs:10988:5)
    at LA (core.mjs:12150:7)

错误指向createAccount.component.html第31行的双向绑定代码[(value)]="model.Username"，对应自定义组件my-textbox：

<my-textbox [label]="ResourceKey.Portals_EditProfile_Username"
    [(value)]="model.Username"
    [readonly]="model.IsSSO" 
    [required]="true">
</my-textbox>

注释掉该文本框后，错误会转移到下一个带有[(value)]绑定的文本框。通过栈追踪确认，st对应zone.js中的prepareEventNames函数，调用该函数时触发错误。关闭构建优化（执行ng build {project} --configuration=production --optimization=false）后，应用可正常运行。

环境信息 #

Angular CLI: 17.3.8
Node: 20.16.0
Package Manager: npm 10.8.1
OS: win32 x64

Angular: 17.3.12
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.8
@angular-devkit/build-angular   17.3.8
@angular-devkit/core            17.3.8
@angular-devkit/schematics      17.3.8
@angular/cdk                    17.3.10
@angular/cli                    17.3.8
@angular/flex-layout            15.0.0-beta.42
@angular/material               17.3.10
@schematics/angular             17.3.8
ng-packagr                      17.3.0
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.4

应用配置 #

export const appConfig: ApplicationConfig = {
    providers: [
        { provide: LocalizationSource, useClass: MinIDLocalizationSource },
        provideRouter(routes),
        importProvidersFrom(BrowserAnimationsModule),
        provideHttpClient(
            withInterceptors([
                DateInterceptorFn
            ])
        )
    ]
};

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

排查方向与解决方案 #

1. 定位问题根源 #

错误明确与构建优化相关，关闭优化后问题消失，说明是摇树优化或代码压缩过程中，zone.js的prepareEventNames函数被误判为无用代码移除，导致事件绑定逻辑失效。

2. 针对性调整构建优化配置 #

无需完全关闭所有优化，可在angular.json的生产配置中精细调整：

• 保留样式、字体优化，仅调整脚本压缩规则：

  "configurations": {
    "production": {
      "optimization": {
        "scripts": "terser",
        "styles": true,
        "fonts": true,
        "terserOptions": {
          "keep_fnames": true,
          "keep_classnames": true,
          "mangle": {
            "exclude": ["prepareEventNames"]
          }
        }
      }
    }
  }
  

• 或者临时关闭脚本优化验证：

  "configurations": {
    "production": {
      "optimization": {
        "scripts": false,
        "styles": true,
        "fonts": true
      }
    }
  }
  

3. 修复自定义组件双向绑定实现 #

确保my-textbox的双向绑定符合Angular标准规范，避免优化工具误判：

• 组件内正确定义输入属性与输出事件：

  import { Component, Input, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'my-textbox',
    templateUrl: './my-textbox.component.html'
  })
  export class MyTextboxComponent {
    @Input() value: string = '';
    @Output() valueChange = new EventEmitter<string>();
  
    onInputChange(newValue: string) {
      this.value = newValue;
      this.valueChange.emit(newValue);
    }
  }
  

• 模板中绑定事件时使用标准命名：

  <input [value]="value" (input)="onInputChange($event.target.value)" />
  

4. 更新依赖版本 #

• 升级zone.js到兼容Angular 17的最新版本（如0.14.7），修复已知的优化兼容性问题：

  npm install zone.js@latest --save
  

• 同步Angular DevKit版本与核心Angular版本（当前核心为17.3.12，build-angular为17.3.8）：

  npm install @angular-devkit/build-angular@17.3.12 --save-dev
  

5. 检查混合模式兼容性 #

项目同时使用独立组件与NgModule，需确保importProvidersFrom导入的模块无冲突：

• 确认BrowserAnimationsModule的导入方式正确，避免重复导入
• 尽量减少独立组件对NgModule导出组件的依赖，保持独立组件的模块化特性

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