title: How to import jquery ui touch punch in Angular 2 Webpack app?
body: <p>I have jQuery range slider widget that I import and use like this: </p>
  
  <pre><code>declare var jQuery: any;
  
  import 'jquery-ui/ui/widgets/slider';
  import 'jquery-ui/ui/widgets/mouse';
  </code></pre>
  
  <p>and use it like this:</p>
  
  <pre><code>jQuery(this.elementRef.nativeElement).find('#range-slider').slider({..});
  </code></pre>
  
  <p>My slider works fine.</p>
  
  <p>The problem is that I need mobile touch enabled slider, so I imported <strong>jQuery UI Touch Punch</strong>:</p>
  
  <pre><code>declare var jQuery: any;
  
  import 'jquery-ui/ui/widgets/slider';
  import 'jquery-ui/ui/widgets/mouse';
  import 'jquery-ui-touch-punch';
  </code></pre>
  
  <p>but it errors with:</p>
  
  <pre><code>TypeError: Cannot read property 'prototype' of undefined
  </code></pre>
  
  <p>Obviously it can't find <strong>jQuery and jQuery UI</strong>. But how do I pass jQuery to touch punch when imported jQuery is not on global scope?</p>
  
  <p>I use <a href="https://github.com/preboot/angular2-webpack" rel="noreferrer">this</a> boilerplate for my project.</p>