How to import jquery-ui in Angular 4

Question

I want to use the toggle function of jquery-ui in my angular app. I've installed jquery-ui with npm:

npm install jquery jquery-ui

As suggested in this answer, I added the path to angular-cli.json file. But I get this error:

Error: ENOENT: no such file or directory, open 'C:\Users\Frank95\Angular projects\Portfolio-Slider\node_modules\jquery-ui\jquery-ui.js'

I searched in the jquery-ui folder and there is no jquery-ui.js file. What should I put in the path?

Answer 1

install jquery - npm install jquery
install jquery ui - npm install jquery-ui-dist --save 

put this file in angular.json in Scripts

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

and put this file in angular.json in styles

"./node_modules/jquery-ui-dist/jquery-ui.css"

import like declare let $: any; in ts file and write jquery and jquery ui code on ngOnInit event done

Answer 2

There is no one file you can include like that, if you have imported through Angular CLI. You would need to add files separately like this:

This is my Angular CLI file where I am just using only a few of them.

  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/popper.js/dist/umd/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/metismenu/dist/metisMenu.min.js",
    "../node_modules/jquery-slimscroll/jquery.slimscroll.min.js",
    "../node_modules/jquery-ui/ui/widget.js",
    "../node_modules/jquery-ui/ui/widgets/datepicker.js",
    "../node_modules/jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.js"
  ],

BTW, .toggle is a function of jquery, jquery-ui just uses that.

Alternatively, you can simply link the CDN resource in the head of your index.html file in src directory. Although not recommended this method works well with Angular.

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

If you want to choose which modules to keep you can visit http://jqueryui.com/download/ and select them one by one.