Include jquery-ui in Angular 5 project

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

You should try this answer, worked well for Angular 10 stackoverflow.com/a/45573919/11156666 — okan
– okan, Commented May 30, 2021 at 9:34

ADreNaLiNe-DJ · Accepted Answer · 2018-02-28 15:14:37Z

5

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"

edited Feb 28, 2018 at 15:14

ADreNaLiNe-DJ

4,8994 gold badges28 silver badges35 bronze badges

answered Feb 28, 2018 at 13:08

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nemanja Grabovac Over a year ago

There is no jquery-ui.js inside jquery-ui folder, it has ui/widgets folders, and inside widgets there are droppable.js, draggable.js etc.. Tried adding those but didn't work..

Fateh Mohamed Over a year ago

sorry install jquery-ui-dist to get the file

Nemanja Grabovac Over a year ago

Still getting the same error... with dist installed

Collectives™ on Stack Overflow

Include jquery-ui in Angular 5 project

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related