Create a wrapper in angular4

 I am trying to create a wrapper in angular 4 to load the javascript files. Everything seems to work until the files jquery-ui and jqueryhelpers raise the error Uncaught ReferenceError: jQuery is not defined at jqueryui.min.js:5. My code looks like this
import { Directive, Component, ElementRef, Input, Output, EventEmitter } from "@angular/core";
import 'jquery';
declare let jQuery: any;

@Directive ({
selector: '[pivot-table]'
})
export class PivotTable {
$el: any;
constructor(el: ElementRef) {
this.$el = jQuery(el.nativeElement);
}
render(): void {
let jsonData = [
{
"Color" : "green",
"Country" : "Canada",
"State" : "Ontario",
"City" : "Toronto",
"Price" : 174,
"Quantity" : 22
},
{
"Color" : "red",
"Country" : "USA",
"State" : "California",
"City" : "Los Angeles",
"Price" : 166,
"Quantity" : 19
}
];
let pivot = $("#pivotContainer").flexmonster({
toolbar: true,
componentFolder:'assets/flexmonster/',
report: {
dataSource: {
data: jsonData
},
slice: {
rows: [
{ uniqueName: "Color" },
{ uniqueName: "[Measures]" }
],
columns: [
{ uniqueName: "Country" }
],
measures: [
{
uniqueName: "Price",
aggregation: "sum"
}
]
}
},
licenseKey: ""
});
}
ngAfterViewInit(): void {
this.render();
}
}