how to use jquery-ui in angular 6

8
votes

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

  1. I ran npm install jquery jquery-ui to install jquery and jquery-ui.

  2. 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>
2
javascriptjqueryangularjquery-uiangular6
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
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
Try replacing your import with declare let $: any; – David
When I replaced, the error disappeared but slider is not appearing. Any clue? – Syed Rafey Husain
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

2 Answers

13
votes

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

1
votes

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"
        ]