javascript - how to use jquery-ui in angular 6

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/appponent.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>

appponent.html

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

appponent.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.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=".2.4.js"></script>
<script src=".12.1/jquery-ui.min.js"></script>

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>

Share Improve this question asked Sep 20, 2018 at 9:33 Syed Rafey Husain 3131 gold badge2 silver badges12 bronze badges

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 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 Commented Sep 20, 2018 at 9:40
Try replacing your import with declare let $: any; – David Commented Sep 20, 2018 at 10:23
When I replaced, the error disappeared but slider is not appearing. Any clue? – Syed Rafey Husain Commented Sep 20, 2018 at 10:30
1 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 Commented Sep 20, 2018 at 10:37

| Show 1 more comment

2 Answers 2

Sorted by: Reset to default 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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to use jquery-ui in angular 6 - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)