Cordova seems to need to be patched

[gregjacobs]

Hey guys,

So we're doing some heavy Angular work with Cordova and we're running into a few cases where we lose the Zone (and therefore lose change detection) when talking to Cordova. There are two main issues I've found so far:

1. Need to patch window.cordova.exec() - success and error callbacks are not run in the correct zone.
2. Need to patch document.addEventListener() specifically for the following Cordova events: pause, resume, activated, documentready (and possibly more - these are at least the ones for iOS). These events are specifically intercepted by Cordova before reaching the underlying (already-patched) APIs, and also do not run in the correct zone.

I have a patch for the first one which I can add to the thread later, but still working on the second.

Thoughts on patching Cordova in general though?

Thanks,
Greg

[JiaLiPassion]

@gregjacobs ,I use cordova with angular too, and basically the cordova.exec() and cordova eventListener, I didn't use it with zone, could you share that the use case you want to use zone in those APIs?

Thanks.

[gregjacobs]

Hey @JiaLiPassion,

So the issue I'm currently experiencing is essentially this:

someComponentMethod() {
    console.log( window.Zone.current.name );  // "angular"

    cordova.exec( onSuccess, onError, 'myPlugin', 'myPluginMethod' );

    function onSuccess() {
        console.log( window.Zone.current.name );  // "<root>"
    }
    function onError() {
        console.log( window.Zone.current.name );  // "<root>"
    }
}

Basically when Cordova calls my callbacks, they do not run in the "angular" zone, and therefore change detection does not occur on the component.

My current patch for exec() fixes the issue, although I'm not sure if this is the best approach or if I'm missing another/better layer that could be patched:

<script src="cordova.js"></script>
<script>
    document.addEventListener( 'deviceready', function() {
        var origCordovaExec = window.cordova.exec;

        window.cordova.exec = function( onSuccess, onError, pluginName, methodName, args ) {
            if( typeof onSuccess === 'function' ) {
                onSuccess = Zone.current.wrap( onSuccess );
            }
            if( typeof onError === 'function' ) {
                onError = Zone.current.wrap( onError );
            }

            origCordovaExec( onSuccess, onError, pluginName, methodName, args );
        };
    } );
</script>

Thoughts?

[gregjacobs]

Btw, I have the same issue with Cordova-specific document events (number 2 in my original description). For example:

console.log( window.Zone.current.name );  // "angular"


document.addEventListener( 'resume', onResume );

function onResume() {
    console.log( window.Zone.current.name );  // "<root>"
}

[JiaLiPassion]

@gregjacobs , I think I know why I didn't experience your problem because I use ionic native , and ionic native basically wrap all cordova.exec into promise, zone.js has wrapped promise, so everything is fine.

I will patch cordova into zone.js later. thanks.

[malladis]

Hello! we are trying to use cordova for our Angular 4 app, and seeing the same issues. Looks like the Number#1 was added on Zone.js v0.6.0 but not number#2 - cordova events..any update on when these are going to be available?

[artuska]

+1.

I have the same problem I described in this issue:

https://github.com/angular/zone.js/issues/1034