I recently integrated blueimp JS gallery with my angular 2 (works with angular-cli application). I installed it through NPM ( npm install blueimp-gallery --save ) and imported it through .angular-cli.json :
"styles": [ "../node_modules/blueimp-gallery/css/blueimp-gallery.css", "../node_modules/blueimp-gallery/css/blueimp-gallery-indicator.css" ], "scripts": [ "../node_modules/blueimp-gallery/js/blueimp-helper.js", "../node_modules/blueimp-gallery/js/blueimp-gallery.js", "../node_modules/blueimp-gallery/js/blueimp-gallery-indicator.js" ]
From there, I use it in angular components:
//from .angular-cli.json declare const blueimp: any; public show(event: any, images: any[]) { const options = { event: event || window.event, }; blueimp.Gallery(images, options); };
So far, so good: it works great, I can use the gallery. However, I recently received crash reports from clients on mobile devices. I wanted to open the github problem, but it seems this is not possible in the blueimp / Gallery github repo.
Here's a crash I've seen a lot on Android devices:
TypeError: Cannot read property 'style' of undefined at Gallery.translate (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), <anonymous>:492:37) at Gallery.translateX (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), <anonymous>:501:12) at Gallery.move (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), <anonymous>:487:12) at Gallery.slide (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), <anonymous>:339:14) at eval (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), <anonymous>:384:22) at n.invokeTask (/polyfills.0a60947aabdcee7751c0.bundle.js:36:7074) at Object.onInvokeTask (/vendor.7a5c4da3f678e71e26f9.bundle.js:261:2558) at n.invokeTask (/polyfills.0a60947aabdcee7751c0.bundle.js:36:7010) at t.runTask (/polyfills.0a60947aabdcee7751c0.bundle.js:36:4427) at invoke (/polyfills.0a60947aabdcee7751c0.bundle.js:36:8187) at t.args.(anonymous function) (/polyfills.0a60947aabdcee7751c0.bundle.js:15:85)
And another one that happens exclusively on iOS devices:
EXCEPTION: undefined is not an object (evaluating 'this.slides[index].style') translate translateX move slide invokeTask@ /polyfills.0a60947aabdcee7751c0.bundle.js:36:7079 onInvokeTask@ /vendor.7a5c4da3f678e71e26f9.bundle.js:261:2568 invokeTask@ /polyfills.0a60947aabdcee7751c0.bundle.js:36:7022 runTask@ /polyfills.0a60947aabdcee7751c0.bundle.js:36:4437 invoke@ /polyfills.0a60947aabdcee7751c0.bundle.js:36:8194
Both crashes are in the same part of blueimp code. I can’t reproduce these accidents with confidence, and I’m struggling to fix them.
Has anyone also used blueimp with angular 2+? Has anyone seen similar issues with the blueimp gallery?