CODEWITHSUNDEEP
javascriptjqueryangularjquery-ui
Nemanja Grabovac
Nemanja Grabovac

Reputation: 878

Include jquery-ui in Angular 5 project

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

Upvotes: 0

Views: 2578

Answers (1)

Fateh Mohamed
Fateh Mohamed

Reputation: 21377

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"

Upvotes: 5

Related Questions