Как импортировать jquery ui touch punch в приложение Angular 2 Webpack?

Question

У меня есть JQuery слайдер диапазон виджет, который я импортировать и использовать так:

declare var jQuery: any; 

import 'jquery-ui/ui/widgets/slider'; 
import 'jquery-ui/ui/widgets/mouse'; 

и использовать его как это:

jQuery(this.elementRef.nativeElement).find('#range-slider').slider({..}); 

Мой слайдер работает отлично.

Проблема заключается в том, что мне нужно мобильный слайдер сенсорный включен, так что я импортировал JQuery UI Прикосновение Панч:

declare var jQuery: any; 

import 'jquery-ui/ui/widgets/slider'; 
import 'jquery-ui/ui/widgets/mouse'; 
import 'jquery-ui-touch-punch'; 

но это ошибки с:

TypeError: Cannot read property 'prototype' of undefined 

Очевидно, что не может найти jQuery и jQuery UI. Но как мне передать jQuery, чтобы коснуться удара, когда импортированный jQuery не находится в глобальной области?

Я использую шаблон this для моего проекта.

Answer 1

Это работало для меня (сортируется вместо слайдера, но та же идея):

import * as $ from 'jquery'; 
import 'jquery-ui/ui/widgets/sortable'; 

(window as any).jQuery = $; 
require('jquery-ui-touch-punch'); 

Требовать вместо импорта в конец имеет важное значение. Если вы используете импорт, код, который устанавливает глобальное окно jQuery в окне, не будет выполняться до тех пор, пока не будет импортирован импорт сенсорного пуска, поскольку импорт выполняется до всего остального.