When using Angular 2 and Typescript in conjunction with JQuery and JQueryUI, I encountered the following error:
Property 'draggable' does not exist on type 'JQuery<HTMLElement>'
I am aware that .draggable() is a function that relies on JQueryUI, and I have already installed JQuery and JQueryUI in my node_modules using the commands below:
npm install --save jquery
npm install --save @types/jquery
npm install --save @types/jqueryui
Although my Webstorm IDE can direct me to the correct location by pressing Ctrl+Click on the function, the console continues to display the error mentioned above.
I am importing the module with import * as $ from 'jquery'; and using the code
$('#element').draggable({containment: '#containment-wrapper});Could someone assist me in locating the error?
UPDATE
Thanks to @LLai for providing valuable guidance on resolving the issue. Essentially, I needed to include the jqueryui core in my project:
npm install --save-dev jqueryui
Then, I had to import jqueryui after jquery like this:
import * as $ from 'jquery';
import 'jqueryui'
Although this resulted in several errors, it seems to be related to a particular version of @types/jquery. Therefore, I followed this recommendation on Github to install a specific version of @types/jquery with
npm install @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96fce7e3f3e4efd6a4b8a6b8a2a1">[email protected]</a> --save-devFollowing these steps, everything is now functioning correctly! Hopefully, this solution will benefit others as well.