I'm working on angular app in which i want to implement draggable. There were questions about that in the past but nothing works for me. What I tried:
npm install jquery jquery-ui
and then adding following lines to angular.json
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/jquery-ui/jquery-ui.js"
]
and then importing it to my component like
declare let $: any;
or
import $ from 'jquery';
or
import $ from 'jquery';
import 'jqueryui';
but I'm still getting error:
TSLint: unused expression, expected an assignment or function call(no-unused-expression)
when placing this line in ngOnInit:
$('#draggable' as any).draggable;
You should use it like (call a function):
$( "#draggable" ).draggable();
P.S: Don't use jQuery with Angular :)
Consider using drag-and-drop from Angular CDK (developed by Angular team):
https://material.angular.io/cdk/drag-drop/overview
Related
I want to use watermark.js in my angular app to add watermarks to images before uploading them.
from what i remember, what I did should suffice to make this work:
download
npm i --save watermark.js
add to scripts tag in angular.json
"scripts":[
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/watermark/dist/jquery.watermark.min.js"
],
use it in a Component
declare var watermark: any;
...
watermark(args)
but i get
ERROR ReferenceError: watermark is not defined
I also tried to declare it as a module by creating src/#types/watermark/index.d.ts and including src/#types it in tsconfig->typeRoots.
declare module 'watermark'
and then importing
import * as w from 'watermark';
But with this the build fails because it cannot find the module 'watermark'.
doing the same with jquery works
import * as $ from 'jquery';
...
$(window).ready(console.log('test'))
any ideas?
According to watermark page: https://lelinhtinh.github.io/watermark/
$(function() {
$('.img_awesome').watermark();
});
so in your component get a handle on a dom element with jQuery then:
$(<selector>).watermark();
for this you need to: declare var $:any;
I try to using emojionearea with jquery in webpack like
import $ from 'jquery'
import emojione from 'emojione'
$('.class').emojioneArea({... })
I tested Jquery working well But when using emojioneArea that has error like
Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).emojioneArea is not a function
How to make that working, thanks.
According to the document, it looks like you import the wrong package name. It's supposed to be emojionearea instead of emojione. I think you also need to expose jquery in the global for other plugins too as following:
import $ from "jquery"
import 'emojionearea';
global.$ = global.jQuery = $;
$('.class').emojioneArea({ ... })
I'm trying to import a jQuery plugin into a single Angular component. It runs in every other browser, but IE 11 chokes on it:
SCRIPT1002: Syntax error
main.bundle.js (1376,1)
When I click the error, it shows me the line at issue:
eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(\"../../../../jquery/dist/jquery.js\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_core__ = __webpack_require__(\"../../../core/esm5/core.js\");\n// require('jquery');\n\n\n\n/*\ndjaodjin-annotate.js...
That's not all of it, but it appears to be to do with importing jQuery, and indeed, when I remove the jQuery import, it runs fine.
The issue may be that I'm importing jQuery into a JavaScript (.js) file, which is a jQuery plugin. Here's a simplified version of it:
import * as jQuery from 'jquery';
(function($) {
'use strict';
function Annotate(el, options) {
this.init();
}
Annotate.prototype = {
init: function() {
console.log('It\'s working.');
},
};
$.fn['annotate'] = function() {
const annotate = new Annotate($(this));
return annotate;
};
})(jQuery);
If I can't import jQuery into a jQuery plugin, how can I use a jQuery plugin? Is there a way around this?
BTW, I'm using jQuery only in one component. The rest of the application is clean of it.
I'd say you don't need to import jQuery in your plugin; your plugin should just assume that jquery has been included and fail if it has not
You can include jquery (first) then your plugin file into your project. Then in your component just declare jquery
declare let $ : any;
and instantiate your plugin like
$('div').annotate();
I actually found that my jQuery plugin had errors in it. It had a couple of lines with ES6 syntax that IE didn't like. But when Webpack compiles it, it turns the whole thing into a string, all on one line. At runtime, it then runs eval() on the string. So you don't get valuable error messages with line numbers. It just gives you the stupid error that I got. But I think #David has a good point. We maybe don't need to import jQuery.
I'm trying to import this DataTable Jquery plugin in Angular 5 (I include both scripts after JQuery and Bootstrap have been loaded)
"https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"
"https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"
But I keep getting this error:
ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery_dist_jquery___default(...)(...).DataTable is not a function
I've added the dependencies to the angular-cli.json:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../3rdParty/data-tables/js/jquery.dataTables.min.js",
"../3rdParty/data-tables/js/dataTables.bootstrap.min.js"
],
and in my component.ts file I import jquery and the plugin
import $ from 'jquery/dist/jquery';
import * as dt1 from '../../../../../3rdParty/jquery.dataTables.min';
import * as dt2 from '../../../../../3rdParty/dataTables.bootstrap.min';
Have you seen this ?
DataTables adapted for Angular, works with v5.0.0
I'm trying to use Bootstrap with jQuery. I'm using Browserify with a Babel transform to compile. I get the following error.
Uncaught ReferenceError: jQuery is not defined
I've tried importing the packages like this, but I get the above error.
import $ from 'jquery';
import Bootstrap from 'bootstrap';
Searching around, I found this answer, so I tried this but I still get the same error.
import $ from 'jquery';
window.$ = window.jQuery = $;
import Bootstrap from 'bootstrap';
Bootstrap.$ = $;
Am I importing these packages incorrectly with ES6 or is it done in a different way? The last thing I tried was importing the packages without ES6 like this, but I still got the same error.
window.$ = window.jQuery = require('jquery');
var Bootstrap = require('bootstrap');
Bootstrap.$ = $
The accepted answer helped me to right track but the final solution for me was a bit shorter so I will post also here.
// Importing jQuery in ES6 style
import $ from "jquery";
// We need to expose jQuery as global variable
window.jQuery = window.$ = $;
// ES6 import does not work it throws error: Missing jQuery
// using Node.js style import works without problems
require('bootstrap');
As mentioned by Pete TNT, there is a bug in the Bootstrap package I am using. I switched to using this Bootstrap package and made the following changes to my code.
window.$ = window.jQuery = require('jquery');
var Bootstrap = require('bootstrap-sass');
Bootstrap.$ = $;
require('../../../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap');
It looks like, for the time-being, ES6 imports will not work with jquery and bootstrap packages in the way I was trying to use them.
I've tried many many solutions but for some reason I had to define the global jquery in lowercase on the base script (eg. main.js)
import jQuery from 'jquery'
global.jQuery = jQuery
global.jquery = jQuery // jquery lowercase was the solution for me
global.$ = jQuery
let Bootstrap = require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'
This solutions also works for vue-cli + jquery + bootstrap
#Enijar's solution didn't work for me. Had to use old CDN method.
<script src="https://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
crossorigin="anonymous"></script>
https://code.jquery.com/