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?

score 15 · Accepted Answer · answered Jan 18 '18 at 13:30

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

score 8 · Answer 2 · answered Aug 08 '17 at 16:51

HOLY SMOKES! This one was very troublesome, but I figured it out after days of trying.

So, there are a lot of partial answers out there, but this should be complete. You cannot from what I have seen, include jquery-ui in your angular-cli and the index. The plugin inclusions will be overwritten and jquery as a global will be undefined. I couldn't get it to work by using just the angular-cli.json, but I did get it to work by only using index inclusion.

Here is what needs to be done to only use index script inclusion for jquery/jquery-ui.

1: Uninstall jquery and jquery-ui and remove it from the package.json

npm uninstall --save jquery jquery-ui

2: Delete the node_modules folder

3: Delete any references to jquery or jquery-ui in you angular-cli.json file

4: Rebuild the node_modules folders (double check that jquery-ui is not there, but it doesn't really matter so long as the angular-cli.json doesn't have it included.

npm install

5: include jquery, then jquery-ui in your index file. I used 2.2.4, because I don't trust 3 yet.

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

6: In what ever component you want to utilize jquery or jquery plugin inject $

declare var $: any;

$('draggable').draggable(); // WORKS!

Where exactly do I put the declare, in the .ts file, .html file in a script tag? — Dan Chase, May 01 '18 at 21:27
@DanChase in the .ts file of the component you want to access jquery. — Chris, May 04 '18 at 13:26
It works, but it throws an error "$" not found. This will cause build error later during deployment. — babiro, Feb 20 '21 at 02:30

score 1 · Answer 3 · answered Aug 04 '17 at 17:38

1

please import jQuery ui to index.html like this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

And decare $ in your component like this

declare var $: any;

answered Aug 04 '17 at 17:38

nickj

330
1
7
15

Is there a way to include this in .angular-cli.json file instead of a web import? The applications needs to work offline as well. – Chris Aug 04 '17 at 17:54
Hi Chris, you can use bower for that . Like this: bower install jquery-ui And then you can import that to both index.html and angular.cli.json. – nickj Aug 04 '17 at 18:21
I don't have bower. I am using npm. I npm installed jquery-ui. I need to know how to include it in the .angular-cli file correctly and how to utilize it in my script like the example above. When I include the file directly I get an error for the draggable function still not being recognized. – Chris Aug 04 '17 at 18:44
Hi Chris, did you import jquery and jquery ui in specific component? Like this import var $: any; // import jquery import 'jquery-ui'; – nickj Aug 04 '17 at 19:12
Could you show me an example of proper importing of Jquery-ui – Chris Aug 04 '17 at 19:22
ok, please do these steps: npm i -S jquery jquery-ui and then import them to your component you want to use jquery-ui eg: home.component.ts import var $: any; import 'jquery-ui'; ok, that is all. please use them and vote me about this answer – nickj Aug 04 '17 at 19:24
I add the jquery and jquery-ui script to my index. Tried importing var $: any and jquery-ui and I still get a draggable is not a function error. – Chris Aug 07 '17 at 10:48

Angular4 can't find Jquery-UI functions

3 Answers3

Linked