Angular 5生产构建出现EventTarget的removeEventListener异常，开发构建正常

Hey there, let's break down how to troubleshoot this frustrating Angular 5 production build error with removeEventListener—I’ve dealt with similar Zone.js-related quirks before, so here’s what to try:

Key Observations from the Error #

First, let’s highlight the core issue from your console log:

main.598d68d658cf204b66cd.bundle.js:1 ERROR TypeError: Failed to execute 'removeEventListener' on 'EventTarget': The callback provided as parameter 2 is not a function.
at r.(anonymous function).XMLHttpRequest.t.responseBlob.o.function.a.(anonymous function).r.(anonymous function).(anonymous function) [as __zone_symbol__open] (polyfills.62d8ac97edff2dddd48f.bundle.js:1:132920)
at polyfills.62d8ac97edff2dddd48f.bundle.js:1:142082
at r.(anonymous function).i.(anonymous function) [as open] (polyfills.62d8ac97edff2dddd48f.bundle.js:1:133379)
at t._subscribe (main.598d68d658cf204b66cd.bundle.js:1:647355)
at t._trySubscribe (main.598d68d658cf204b66cd.bundle.js:1:98272)
at t.subscribe (main.598d68d658cf204b66cd.bundle.js:1:98101)
at e.a (main.598d68d658cf204b66cd.bundle.js:1:695746)
at e._innerSub (main.598d68d658cf204b66cd.bundle.js:1:718260)
at e._tryNext (main.598d68d658cf204b66cd.bundle.js:1:718184)
at e._next (main.598d68d658cf204b66cd.bundle.js:1:718007)

This points to Zone.js (the polyfill handling Angular's change detection) getting confused during production minification/optimization—specifically with XMLHttpRequest event callbacks.

Troubleshooting & Fixes #

1. Fix Zone.js Polyfill Optimization Issues #

Production builds’ tree-shaking and minification can sometimes break Zone.js’s event wrapping logic. Try these steps:

• Verify Zone.js import: Ensure your polyfills.ts has the full Zone.js import, not a trimmed version:

  import 'zone.js/dist/zone'; // Don't use zone.js/dist/zone-min unless you're certain it's safe
  

• Disable build optimizers temporarily: In your angular.json, tweak the production build config to turn off optimizations and see if the error goes away:

  "configurations": {
    "production": {
      "optimization": false,
      "buildOptimizer": false
    }
  }
  

  If this fixes it, re-enable optimizations one by one to isolate the culprit. You can also adjust Terser settings to protect Zone.js code:

  "terserOptions": {
    "keep_classnames": true,
    "keep_fnames": true
  }
  

2. Ensure Consistent Event Listener References #

removeEventListener requires the exact same function reference that was used in addEventListener. Production minification can exacerbate issues if you’re using anonymous functions:

• Bad practice (can’t remove correctly):

  xhr.addEventListener('load', () => { /* your logic */ });
  

• Good practice (consistent reference):

  const loadHandler = () => { /* your logic */ };
  xhr.addEventListener('load', loadHandler);
  // Later, remove with the same reference
  xhr.removeEventListener('load', loadHandler);
  

If you’re using RxJS’s ajax or similar wrappers, make sure their internal callbacks aren’t being mangled by minification.

3. Check Zone.js Version Compatibility #

Angular 5 has specific Zone.js version requirements—mismatches can cause production-only bugs:

• Install a known-compatible version (Angular 5 typically works with Zone.js ~0.8.20):

  npm install zone.js@0.8.29 --save
  

• Clean your dependencies and rebuild:

  rm -rf node_modules package-lock.json
  npm install
  ng build --prod
  

4. Rule Out Third-Party Library Conflicts #

Some libraries modify EventTarget or XMLHttpRequest prototypes, clashing with Zone.js in production:

• Gradually remove third-party libraries and rebuild production to find the culprit.
• If you identify the problematic library, use Zone.runOutsideAngular() to wrap its calls and avoid Zone.js intercepting its events:

  this.zone.runOutsideAngular(() => {
    // Call the third-party library's code here
  });
  

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