how to use jquery-ui in angular 6

Question

I have tried number of methods posted on StackOverflow to use jquery-ui in angular 6 component but none of them worked. For example,

I ran npm install jquery jquery-ui to install jquery and jquery-ui.
Included following in angular.json

"scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/jquery-ui-dist/jquery-ui.js",

Error is as follows:

AppComponent_Host.ngfactory.js [sm]:1ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_1__(...).slider is not a function
    at AppComponent.push../src/app/app.component.ts.AppComponent.ngAfterContentInit (http:||localhost:4200/main.js:154:56)
    at callProviderLifecycles (http:||localhost:4200/vendor.js:42663:18)
    at callElementProvidersLifecycles (http:||localhost:4200/vendor.js:42644:13)
    at callLifecycleHooksChildrenFirst (http:||localhost:4200/vendor.js:42634:29)
    at checkAndUpdateView (http:||localhost:4200/vendor.js:43565:5)
    at callWithDebugContext (http:||localhost:4200/vendor.js:44454:25)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http:||localhost:4200/vendor.js:44132:12)
    at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (http:||localhost:4200/vendor.js:41948:22)
    at http:||localhost:4200/vendor.js:37684:63
    at Array.forEach (native)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Car Dealer</title>
</head>
<body>
  <app-root></app-root>
</body> 
</html>

app.component.html

<div id="slider">
</div>

app.component.ts

import { Component, AfterContentInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit {
  title = 'MDK';

  ngAfterContentInit() {
    $( "#slider" ).slider({
      range: true,
      values: [ 17, 67 ]
    });
  }
}

Another post suggested that I should not use angular.json of angular 6 at all but use index.html to include scripts but it also did not worked.

I included following in index.html but even then same error appeared

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

import the lib in the angular.cli.json under the section scripts, you should not use directly jQuery, in this scenario, but the cli.json is fine, everything should be imported there. You can also use ` npm install jquery` and then add int the cli.json the scripts taken from node-modules folder — Jacopo Sciampi
– Jacopo Sciampi, Commented Sep 20, 2018 at 9:35
In angular.json, I have added following lines already. There is no angular-cli.json in Angular6. "scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/jquery-ui-dist/jquery-ui.js", . . — Syed Rafey Husain
– Syed Rafey Husain, Commented Sep 20, 2018 at 9:40
When I replaced, the error disappeared but slider is not appearing. Any clue? — Syed Rafey Husain
– Syed Rafey Husain, Commented Sep 20, 2018 at 10:30
Thanks David. Seems like I forgot to include following in angular 6 /src/styles.css @import "../node_modules/jquery-ui-dist/jquery-ui.min.css"; Now it is working perfectly. Thanks a lot!!!! Could you write what is the difference between import and let as you suggested. — Syed Rafey Husain
– Syed Rafey Husain, Commented Sep 20, 2018 at 10:37

David · Accepted Answer · 2018-09-20 13:15:50Z

13

If you write

import * as $ from 'jquery';

then only the code for jquery (and not extra plugins, like jquery-ui) will be imported by typescript compiler into the $ variable.

If you use

 declare let $: any;

Then you are just notifying typescript that this variable exist. In that case, $ will contain whatever what assigned to it in the scripts you imported in angular.json, which is jquery AND jquery-ui plugins

edited Sep 20, 2018 at 13:15

answered Sep 20, 2018 at 12:41

David

34.6k13 gold badges90 silver badges124 bronze badges

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

1 Comment

Konstantin Over a year ago

Doesn't work for me. It says ERROR ReferenceError: $ is not defined

Omprakash Amarwal · Accepted Answer · 2018-09-20 13:02:51Z

1

Please update your scripts part in angular.json file

"scripts": [
           "../node_modules/jquery/dist/jquery.min.js",
           "../node_modules/jquery-ui-dist/jquery-ui.js"
        ]

answered Sep 20, 2018 at 13:02

Omprakash Amarwal

417 bronze badges

Collectives™ on Stack Overflow

how to use jquery-ui in angular 6

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related