Blueimp Gallery with Angular 2+

Question

I recently integrated blueimp JS gallery with my angular 2 (running with angular-cli) application. I installed it through NPM (npm install blueimp-gallery --save) and imported it via .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 fine, I can use the gallery. However I've recently been receiving crash reports from customers on mobile devices. I wanted to open a github issue, but it seems that it's not possible on blueimp/Gallery github repo.

Here is a crash that's 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), :492:37)
    at Gallery.translateX (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), :501:12)
    at Gallery.move (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), :487:12)
    at Gallery.slide (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), :339:14)
    at eval (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), :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 seem to reproduce with certainty those crashes and I am struggling to fix them.

Has anyone also been using blueimp with angular 2+ ? Has anyone seen similar issues with blueimp Gallery ?

Blueimp Gallery with Angular 2+

0 Answers