Angular JS Clash
-
Hello,
I’m writing a plugin that uses Angular JS. I’m enqueuing it using wp_enqueue_script and it breaks Post Thumbnail Editor. I think it’s possibly because your plugin tries to load angular via requirejs. Can you help me what to do so that both our plugins could work together?
Thanks,
Arpad
-
A couple thoughts:
* Make sure that you are using PTE in debug mode
* I would try running angular in noconflict mode. If you modified PTE or your plugin, you might be able to experiment with.noConflict().
* If you find a solution for me to implement I would be happy to test and push out an updateAlso found this page which might help: http://www.mattburkedev.com/multiple-angular-versions-on-the-same-page/
Ok. I’ll experiment a bit. The problem is PTE dies if Angular is loaded before its files.
This might cause future issues with any plugin that enqueues angular normally (not using requirejs). The plugins works well, but PTE dies. 🙂
This is the error I get.
https://docs.angularjs.org/error/$injector/modulerr?p0=pte&p1=Error:%20%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.2.1%2F$injector%2Fmodulerr%3Fp0%3DUrlCacheBreaker%26p1%3DError%253A%2520%255B%2524injector%253Aunpr%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.1%252F%2524injector%252Funpr%253Fp0%253D%252524filterProvider%250A%2520%2520%2520%2520at%2520Error%2520(native)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Frnd%252Fthemer%252Fwp-content%252Fplugins%252Fpost-thumbnail-editor%252Fjs-build%252Fmain.js%253Fver%253D2.4.5%253A20%253A3250%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Frnd%252Fthemer%252Fwp-content%252Fplugins%252Fpost-thumbnail-editor%252Fjs-build%252Fmain.js%253Fver%253D2.4.5%253A20%253A16297%250A%2520%2520%2520%2520at%2520Object.n%2520%255Bas%2520get%255D%2520(http%253A%252F%252Flocalhost%252Frnd%252Fthemer%252Fwp-content%252Fplugins%252Fpost-thumbnail-editor%252Fjs-build%252Fmain.js%253Fver%253D2.4.5%253A20%253A14916)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Frnd%252Fthemer%252Fwp-content%252Fplugins%252Fpost-thumbnail-editor%252Fjs-build%252Fmain.js%253Fver%253D2.4.5%253A20%253A14506%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%250A%2520%2520%2520%2520at%2520s%2520(http%253A%252F%252Flocalhost%252Frnd%252Fthemer%252Fwp-content%252Fplugins%252Fpost-thumbnail-editor%252Fjs-build%252Fmain.js%253Fver%253D2.4.5%253A20%253A3557)%250A%2520%2520%2520%2520at%2520i%2520(http%253A%252F%252Flocalhost%252Frnd%252Fthemer%252Fwp-content%252Fplugins%252Fpost-thumbnail-editor%252Fjs-build%252Fmain.js%253Fver%253D2.4.5%253A20%253A14337)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Frnd%252Fthemer%252Fwp-content%252Fplugins%252Fpost-thumbnail-editor%252Fjs-build%252Fmain.js%253Fver%253D2.4.5%253A20%253A14414%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http:%2F%2Flocalhost%2Frnd%2Fthemer%2Fwp-content%2Fplugins%2Fpost-thumbnail-editor%2Fjs-build%2Fmain.js%3Fver%3D2.4.5:20:3250%0A%20%20%20%20at%20http:%2F%2Flocalhost%2Frnd%2Fthemer%2Fwp-content%2Fplugins%2Fpost-thumbnail-editor%2Fjs-build%2Fmain.js%3Fver%3D2.4.5:20:14725%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20s%20(http:%2F%2Flocalhost%2Frnd%2Fthemer%2Fwp-content%2Fplugins%2Fpost-thumbnail-editor%2Fjs-build%2Fmain.js%3Fver%3D2.4.5:20:3557)%0A%20%20%20%20at%20i%20(http:%2F%2Flocalhost%2Frnd%2Fthemer%2Fwp-content%2Fplugins%2Fpost-thumbnail-editor%2Fjs-build%2Fmain.js%3Fver%3D2.4.5:20:14337)%0A%20%20%20%20at%20http:%2F%2Flocalhost%2Frnd%2Fthemer%2Fwp-content%2Fplugins%2Fpost-thumbnail-editor%2Fjs-build%2Fmain.js%3Fver%3D2.4.5:20:14414%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20s%20(http:%2F%2Flocalhost%2Frnd%2Fthemer%2Fwp-content%2Fplugins%2Fpost-thumbnail-editor%2Fjs-build%2Fmain.js%3Fver%3D2.4.5:20:3557)%0A%20%20%20%20at%20i%20(http:%2F%2Flocalhost%2Frnd%2Fthemer%2Fwp-content%2Fplugins%2Fpost-thumbnail-editor%2Fjs-build%2Fmain.js%3Fver%3D2.4.5:20:14337
Yeah, I would probably need to add some scoper like in the link that I posted earlier to hide the current angular, load pte angular, descope pte angular, and return pte-angular. In fact you might be able to just wrap angular-min.js with this as a function:
return (function (){ var currentangular = window.angular || {}, window.angular = angular = {}; ... // the rest of angular.min.js goes here angular = window.angular window.angular = currentangular return angular })()P.S. I’m currently revamping the plugin to use the commonjs requirement format instead, which should make the scoping work better. But there is no time frame on this.
Yeah, if I wrap angular.min.js into your example code, it works (with a little amend), but other plugin devs might not consider this. Cheers. I’ll be waiting for your updated version! 😀
What did you amend?
Sorry, I’ve chaged and tested it, but it didn’t work in the end. So no solution as of yet.
The topic ‘Angular JS Clash’ is closed to new replies.