I have jQuery range slider widget that I import and use like this:
declare var jQuery: any;
import 'jquery-ui/ui/widgets/slider';
import 'jquery-ui/ui/widgets/mouse';
and use it like this:
jQuery(this.elementRef.nativeElement).find('#range-slider').slider({..});
My slider works fine.
The problem is that I need mobile touch enabled slider, so I imported jQuery UI Touch Punch:
declare var jQuery: any;
import 'jquery-ui/ui/widgets/slider';
import 'jquery-ui/ui/widgets/mouse';
import 'jquery-ui-touch-punch';
but it errors with:
TypeError: Cannot read property 'prototype' of undefined
Obviously it can't find jQuery and jQuery UI. But how do I pass jQuery to touch punch when imported jQuery is not on global scope?
I use this boilerplate for my project.
This worked for me (sortable instead of slider but the same idea):
import * as $ from 'jquery';
import 'jquery-ui/ui/widgets/sortable';
(window as any).jQuery = $;
require('jquery-ui-touch-punch');
The require instead of import at the end is important. If you use an import the code that sets the jQuery global on window won't run until after the touch punch import since imports are run before everything else.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With