Patching Element.prototype.addEventListener breaks any Angular 2 app

问题

I have an Angular 2 app https://github.com/DanWahlin/Angular-JumpStart. I tried to patch Element.prototype.addEventListener for some of my use case.

Here is the patch:

var origLis = Element.prototype.addEventListener;
Element.prototype.addEventListener = function(type, handler, useCapture) {
    console.log("Added");
    return origLis.apply(this, arguments);
}

If I patch Element.prototype.addEventListener, it breaks the Angular 2 app. No resources/XHRs are being sent in the app. I tried this on many Angular 2 apps. But, same result. There are no errors in the console

Does anybody know why this is happening and is there a workaround for this?

PS: I don't want to patch EventTarget.prototype.addEventListener, as described here

Angular 2 application breaks when HTMLElement.prototype.addEventListener is modified

回答1:

if you try to monkey-patch addEventListener, don't do it on Element.prototype, you can do it on EventTarget.prototype. in Angular, zone.js monkey-patch EventTarget.prototype.addEventListener to make change detection work, so if you modify Element.prototype which will break angular default behavior.

来源：https://stackoverflow.com/questions/48662294/patching-element-prototype-addeventlistener-breaks-any-angular-2-app