Jak importować jquery ui touch punch w aplikacji Angular 2 Webpack?

Question

Mam jQuery suwak Zakres widżet, który importować i używać tak:

declare var jQuery: any; 

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

i używać go tak:

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

Mój suwak działa dobrze.

Problemem jest to, że muszę być włączona mobilne dotykowy suwak, więc importowane jQuery UI Dotknij dziurkacza:

declare var jQuery: any; 

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

ale błędy z:

TypeError: Cannot read property 'prototype' of undefined 

Oczywiście nie mogę znaleźć jQuery i jQuery UI. Ale w jaki sposób przekazać jQuery, aby dotknąć ponczu, gdy zaimportowany jQuery nie znajduje się w zasięgu globalnym?

Używam this dla mojego projektu.

Answer 1

ten pracował dla mnie (sortable zamiast suwaka ale ten sam pomysł):

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

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

require zamiast importu na końcu jest ważna. Jeśli użyjesz importu, kod, który ustawi globalne okno jQuery, nie będzie działał aż do momentu importu dotyku, ponieważ importowanie odbywa się przed wszystkim innym.