Menu
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>
214
jQuery is a small yet feature-rich powerful javascript library that helps to manipulate the HTML DOM with less javascript code. We can use jQuery with Angular. There are some situations you come across while building Angular apps that it's absolutely necessary to use a library like jQuery to get something done.
Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.
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
107
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"
]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
