在Angular 5项目中包含jquery-ui

Question

I am trying to add jquery-ui to my project in Angular 5 since I had to create a feature using jquery-ui, but i cannot get it to work. I get the error:

TypeError: WEBPACK_IMPORTED_MODULE_10_jquery (...).droppable is not a function

I tried putting the jquery-ui script to my assets folder and load it in index.html, but that doesn't work since it loads before jquery. Now i used this code to add it in component where I use it, and it adds it after jquery but still get the error above:

if (!document.querySelector('script[src="./assets/js/jquery-ui.min.js"]')) {
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = './assets/js/jquery-ui.min.js';
      document.head.appendChild(s);
    }

When i run npm install jquery-ui and add scripts to angular-cli.json, same error occurs... Dont know what else to try...

EDIT: This answer finally worked for me: Angular4 can't find Jquery-UI functions

Answer 1

You can install jquery-ui-dist to avoid adding the file in your index file:

npm install jquery
npm install jquery-ui-dist

Add this in script inside angular-cli.json

 "../node_modules/jquery/dist/jquery.min.js",
 "../node_modules/jquery-ui-dist/jquery-ui.js"