Angular4 can't find Jquery-UI functions

Question

I have installed Jquery and Jquery-ui

npm install --save jquery jquery-ui

The files are in the node_modules directory. I have a component that declares Jquery

declare var $: JQueryStatic;

My jquery functions work just fine, but the jquery-ui functions do not.

$('some-div').dropdown(); // works
$('window').draggable(); // draggable is not recognized as a function

So, obviously my inclusion for jquery-ui is not correct. I tried including a bunch of different things in my .angular-cli.json page to no success.

Things I have tried in my .angular-cli file:

...
"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/jquery-ui/ui/widgets/draggable.js",
    "../node_modules/jquery-ui/ui/draggable.js",
]

I tried importing directly into the component, but that gave problems with $ui being defined. I also got errors that defined is not defined.

I have looked at npm jquery-ui and Jquery-ui Upgrade guides

Any ideas where I am going wrong?

Answer 1

The solution to define jquery-ui in angular-cli.json (and avoid to add it in index.html) is:

1 : Import jquery-ui-dist

    npm install jquery jquery-ui-dist

2: Add scripts in angular-cli.json

    "scripts": [
       "../node_modules/jquery/dist/jquery.min.js",
       "../node_modules/jquery-ui-dist/jquery-ui.js"
    ],

Source : https://stackoverflow.com/a/38795318