Angular Zone interactions

[vbraun]

There are some tricky interactions between angular (2+) zone.js and this plugin; It would be good to add a section to the documentation. My suggestion is:

Angular (2+) Zone

Make sure that the polyfill.js script is loaded before cordova.js in your index.html

 <script type="text/javascript" src="runtime-es2015.hash.js"></script>
 <script type="text/javascript" src="polyfills-es2015.hash.js"></script>
 <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
 <script type="text/javascript" src="main-es2015.hash.js"></script>

The polyfill is applied synchronously, but cordova adds and initializes plugins asynchronously. Any other load order is a race condition that can lead to this plugin breaking.

In my case, when hitting the race condition there is a FileReader.__zone_symbol__originalInstance and this plugin is not working. The correct initialization order is first the polyfill, and then overwrite FileReader with this plugin (so there is no __zone_symbol__originalInstance.

Angular change detection does not work out of the box; You either need to monkey patch XMLHttpRequest similar to what zone does (and only after the plugin is loaded), or wrap all your API calls in a ngZone.run(). See issue #52

[manish2788]

Plugin doesn't support out of the box fix for Angular. Closing the issue.