Search code examples
jqueryjquery-uiangularwebpackjquery-ui-touch-punch

How to import jquery ui touch punch in Angular 2 Webpack app?

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.

Solution

  • 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.