I have read a few Q/A on here on how to use external libraries in TS. Following a lot of the suggestions, I'm registering BT alert to an element like this:
import * as $ from "jquery";
import * as bootstrap from 'bootstrap';
window["$"] = $;
window["jQuery"] = $;
$("#clientAlert").alert();
and everything work just fine.
Now I need to do the same for JQuery-Ticker
import * as jqueryTicker from "jquery-ticker";
$('.newsticker').ticker();
WebPack build fails with this error:
error TS2339: Property 'ticker' does not exist on type
'JQuery'.
You could cast it to <any> or extend the jquery typing to add your own method.
(<any>$(".newsticker")).ticker();
//Or add your own custom methods (Assuming this is added by yourself as a part of custom plugin)
interface JQuery {
newsticker():void;
}
Or this
($(".newsticker") as any).ticker();
Try this :
($(".newsticker") as any).ticker();
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 using TypeScript and a moment.js plugin called 'moment-transform'.
moment-transform dynamically adds a transform function to the moment object. Usage is something like this:
import moment = require('moment');
require('moment-transform'); // simply adds transform function
moment().transform('YYYY-MM-+07 00:00:00.000').toDate();
However, when building this with TypeScript, I get this error:
error TS2339: Property 'transform' does not exist on type 'Moment'.
How would I handle dynamically added functions properly?
[edit] (moment() as any).transform('YYYY-MM-+07 00:00:00.000').toDate(); seems to work. Is this really the way to go? Is there any possibility to specify this globally??
You can extend the moment definitions using the following approach:
Declare any extensions to moment in your custom 'moment.d.ts':
import * as moment from "moment";
declare module "moment"
{
interface Moment
{
transform(a: string): Moment;
}
}
And consume it in your 'my.ts':
import * as moment from 'moment';
moment().transform('qw').toDate();
More on the matter: Module Augmentation
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/