angular cli and jQuery plugin

Question

I'm trying to use the plugin jquery tooltipster along with Angular CLI 1.5.5 and I'm having some difficulties. Basically, my code is the following:

import * as $ from 'jquery';
import 'jquery-tooltipster/js/jquery.tooltipster.min';

...

$(this.itemRef.nativeElement).tooltipster({
  position: "bottom"
});

Then, in the console, I get

jquery.tooltipster.min.js:1 Uncaught ReferenceError: jQuery is not defined

I understand that it's because "jquery-tooltipster" is trying to extend "jQuery" (the global one) and does not find it but then, I have no idea how to achieve that. I think that I could use ng eject to get the webpack.config file and use the ProvidePlugin, but I'd like not to eject the configuration and work with the angular-cli.json instead.

Is there a way to make a jQuery plugin works with ng-cli or must I eject the configuration?

Possible duplicate of How to include jQuery properly in angular cli 1.0.0-rc.0? — Harry
– Harry, Commented Dec 12, 2017 at 13:42

David · Accepted Answer · 2017-12-12 13:43:37Z

1

There are several ways to do it. You can just includes the jQuery and plugin js files in your index.html or scripts sections in .angular-cli and then have that line in your code where you use jQuery

declare var $ : any;

Otherwise, you can try importing the jQuery type

npm install @types/jquery --save-dev

(you might need to extend the jQuery interface to add your plugin's signature though)

answered Dec 12, 2017 at 13:43

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ssougnez Over a year ago

Ah ! The part I was missing was the inclusion of the js script in the "script" part of "angular-cli.json". So I added "jQuery" and "jQuery-tooltipster" in there, then put declare var $ : any; where I'm using jQuery and it works well. Thanks ;-)

Rui Pimentel Over a year ago

In my humble opinion, Typescript loses (almost) all of its purpose when we do the declare var $: any; thing. If using standalone jQuery, I would certainly go with installing its typings. The problem is: how to declare/import proper typings for the plugins?

David Over a year ago

You can declare your own interface I guess

Collectives™ on Stack Overflow

angular cli and jQuery plugin

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related