You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by GitBox <gi...@apache.org> on 2020/07/13 16:55:33 UTC
[GitHub] [cordova] nunoarruda opened a new issue #228: Why is cordova.js interfering with ng5-slider?
nunoarruda opened a new issue #228:
URL: https://github.com/apache/cordova/issues/228
# Bug Report
## Problem
cordova.js is interfering with ng5-slider
### What is expected to happen?
ng5-slider to behave as expected
### What does actually happen?
ng5-slider behaves strangely when using cordova.js
## Information
<!-- Include all relevant information that might help understand and reproduce the problem -->
I've opened a similar issue on the ng5-slider repository: https://github.com/angular-slider/ng5-slider/issues/198
### Command or Code
<!-- What command or code is needed to reproduce the problem? -->
Repository to reproduce the issue: https://github.com/nunoarruda/ng5-slider-cordova
### Environment, Platform, Device
<!-- In what environment, on what platform or on which device are you experiencing the issue? -->
macOS, Google Chrome, browser platform
### Version information
<!--
What are relevant versions you are using?
For example:
Cordova: Cordova CLI, Cordova Platforms, Cordova Plugins
Other Frameworks: Ionic Framework and CLI version
Operating System, Android Studio, Xcode etc.
-->
Cordova 9.0.0
Angular 10
macOS
## Checklist
<!-- Please check the boxes by putting an x in the [ ] like so: [x] -->
- [x] I searched for existing GitHub issues
- [x] I updated all Cordova tooling to most recent version
- [x] I included all the necessary information above
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org
[GitHub] [cordova] breautek edited a comment on issue #228: Why is cordova.js interfering with ng5-slider?
Posted by GitBox <gi...@apache.org>.
breautek edited a comment on issue #228:
URL: https://github.com/apache/cordova/issues/228#issuecomment-704659502
Hi there, I've finally got around to investigate this a bit.
## The Problem
The reason why this is failing is because two things are overriding the `addEventListener` API.
`zone-evergreen.js` does so at using this function: https://github.com/angular/zone.js/blob/b11bd466c20dc338b6d4d5bc3e59868ff263778d/dist/zone-evergreen.js#L1806
`zone-evergreen.js` is kind of complicated, so I'm not sure at what point it actually overrides the `addEventListener` function, I just know that it does. AB testing both versions in your reproduction app shows the event leads to `platform-browser.js:395` (angular framework code)
```javascript
addEventListener(element, eventName, handler) {
const plugin = this._findPluginFor(eventName);
return plugin.addEventListener(element, eventName, handler);
}
````
Where on non-cordova, `plugin.addEventListener` method points to the function defined to `zone-evergreen.js` posted above,
and on Cordova, the function points to https://github.com/apache/cordova-browser/blob/3b077ad590adc6f53a93b8af98efb20f8b1caeb7/cordova-lib/cordova.js#L123
```javascript
document.addEventListener = function (evt, handler, capture) {
var e = evt.toLowerCase();
if (typeof documentEventHandlers[e] !== 'undefined') {
documentEventHandlers[e].subscribe(handler);
} else {
m_document_addEventListener.call(document, evt, handler, capture);
}
};
```
As you can see, Cordova overrides the addEventListener method to handle some cordova-specific events, such as `deviceready`, `pause`, `resume`, and `activated`. Cordova **will** fallback to the original implementation of `addEventListener` if the incoming event isn't a cordova-defined event. However, unfortunately that original implementation is a reference to the native `addEventListener` and not Angular's/Zone replacement implementation.
Basically this means angular never receives events such as `mousemove`.
Personally I see this as bad practice on both sides, no one should be touching/replacing native functions. This case is a prime example of the why. But obviously these are decisions well baked into both frameworks and is incredibly hard to change without virtually breaking every single project using the framework. This means Angular and Cordova doesn't really support each other (in a nice way, see the workaround).
## Workaround
I tried moving the `cordova.js` script tag so it's loaded after the angular framework. I also had to remove the `defer` attribute on the angular script tags to ensure that are loaded and executed first. This will make Cordova store a reference to the modified `addEventListener` interface rather than the browser's native function. This appears to work but mileage may vary. I'm not sure if this will break anything else, but I don't see deviceready not invoked 5 second warning, so *that's a good sign*.
Because I don't believe Cordova will change anything in relation to this, I'll be closing this issue.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org
[GitHub] [cordova] breautek commented on issue #228: Why is cordova.js interfering with ng5-slider?
Posted by GitBox <gi...@apache.org>.
breautek commented on issue #228:
URL: https://github.com/apache/cordova/issues/228#issuecomment-704659502
Hi there, I've finally got around to investigate this a bit.
## The Problem
The reason why this is failing is because two things are overriding the `addEventListener` API.
`zone-evergreen.js` does so at using this function: https://github.com/angular/zone.js/blob/b11bd466c20dc338b6d4d5bc3e59868ff263778d/dist/zone-evergreen.js#L1806
`zone-evergreen.js` is kind of complicated, so I'm not sure at what point it actually overrides the `addEventListener` function, I just know that it does. AB testing both versions in your reproduction app event leads to `platform-browser.js:395` (angular framework code)
```javascript
addEventListener(element, eventName, handler) {
const plugin = this._findPluginFor(eventName);
return plugin.addEventListener(element, eventName, handler);
}
````
Where on non-cordova, `plugin.addEventListener` method points to the function defined to `zone-evergreen.js` posted above,
and on Cordova, the function points to https://github.com/apache/cordova-browser/blob/3b077ad590adc6f53a93b8af98efb20f8b1caeb7/cordova-lib/cordova.js#L123
```javascript
document.addEventListener = function (evt, handler, capture) {
var e = evt.toLowerCase();
if (typeof documentEventHandlers[e] !== 'undefined') {
documentEventHandlers[e].subscribe(handler);
} else {
m_document_addEventListener.call(document, evt, handler, capture);
}
};
```
As you can see, Cordova overrides the addEventListener method to handle some cordova-specific events, such as `deviceready`, `pause`, `resume`, and `activated`. Cordova **will** fallback to the original implementation of `addEventListener` if the incoming event isn't a cordova-defined event. However, unfortunately that original implementation is a reference to the native `addEventListener` and not Angular's/Zone replacement implementation.
Basically this means angular never receives events such as `mousemove`.
Personally I see this as bad practice on both sides, no one should be touching/replacing native functions. This case is a prime example of the why. But obviously these are decisions well baked into both frameworks and is incredibly hard to change without virtually breaking every single project using the framework. This means Angular and Cordova doesn't really support each other.
## Workaround
I tried moving the `cordova.js` script tag so it's loaded after the angular framework. I also had to remove the `defer` attribute on the angular script tags to ensure that are loaded and executed first. This will make Cordova store a reference to the modified `addEventListener` interface rather than the browser's native function. This appears to work but mileage may vary. I'm not sure if this will break anything else, but I don't see deviceready not invoked 5 second warning, so *that's a good sign*.
Because I don't believe Cordova will change anything in relation to this, I'll be closing this issue.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org
[GitHub] [cordova] breautek commented on issue #228: Why is cordova.js interfering with ng5-slider?
Posted by GitBox <gi...@apache.org>.
breautek commented on issue #228:
URL: https://github.com/apache/cordova/issues/228#issuecomment-657683926
Is it possible to include unminimized code in the reproduction repo?
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org
[GitHub] [cordova] breautek closed issue #228: Why is cordova.js interfering with ng5-slider?
Posted by GitBox <gi...@apache.org>.
breautek closed issue #228:
URL: https://github.com/apache/cordova/issues/228
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org
[GitHub] [cordova] breautek edited a comment on issue #228: Why is cordova.js interfering with ng5-slider?
Posted by GitBox <gi...@apache.org>.
breautek edited a comment on issue #228:
URL: https://github.com/apache/cordova/issues/228#issuecomment-704659502
Hi there, I've finally got around to investigate this a bit.
## The Problem
The reason why this is failing is because two things are overriding the `addEventListener` API.
`zone-evergreen.js` does so at using this function: https://github.com/angular/zone.js/blob/b11bd466c20dc338b6d4d5bc3e59868ff263778d/dist/zone-evergreen.js#L1806
`zone-evergreen.js` is kind of complicated, so I'm not sure at what point it actually overrides the `addEventListener` function, I just know that it does. AB testing both versions in your reproduction app shows the event leads to `platform-browser.js:395` (angular framework code)
```javascript
addEventListener(element, eventName, handler) {
const plugin = this._findPluginFor(eventName);
return plugin.addEventListener(element, eventName, handler);
}
````
Where on non-cordova, `plugin.addEventListener` method points to the function defined to `zone-evergreen.js` posted above,
and on Cordova, the function points to https://github.com/apache/cordova-browser/blob/3b077ad590adc6f53a93b8af98efb20f8b1caeb7/cordova-lib/cordova.js#L123
```javascript
document.addEventListener = function (evt, handler, capture) {
var e = evt.toLowerCase();
if (typeof documentEventHandlers[e] !== 'undefined') {
documentEventHandlers[e].subscribe(handler);
} else {
m_document_addEventListener.call(document, evt, handler, capture);
}
};
```
As you can see, Cordova overrides the addEventListener method to handle some cordova-specific events, such as `deviceready`, `pause`, `resume`, and `activated`. Cordova **will** fallback to the original implementation of `addEventListener` if the incoming event isn't a cordova-defined event. However, unfortunately that original implementation is a reference to the native `addEventListener` and not Angular's/Zone replacement implementation.
Basically this means angular never receives events such as `mousemove`.
Personally I see this as bad practice on both sides, no one should be touching/replacing native functions. This case is a prime example of the why. But obviously these are decisions well baked into both frameworks and is incredibly hard to change without virtually breaking every single project using the framework. This means Angular and Cordova doesn't really support each other.
## Workaround
I tried moving the `cordova.js` script tag so it's loaded after the angular framework. I also had to remove the `defer` attribute on the angular script tags to ensure that are loaded and executed first. This will make Cordova store a reference to the modified `addEventListener` interface rather than the browser's native function. This appears to work but mileage may vary. I'm not sure if this will break anything else, but I don't see deviceready not invoked 5 second warning, so *that's a good sign*.
Because I don't believe Cordova will change anything in relation to this, I'll be closing this issue.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org
[GitHub] [cordova] nunoarruda commented on issue #228: Why is cordova.js interfering with ng5-slider?
Posted by GitBox <gi...@apache.org>.
nunoarruda commented on issue #228:
URL: https://github.com/apache/cordova/issues/228#issuecomment-658172276
@breautek I've just done that. Thanks for trying to help!
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org