2

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?

ssougnez
  • 5,315
  • 11
  • 46
  • 79
  • Possible duplicate of [How to include jQuery properly in angular cli 1.0.0-rc.0?](https://stackoverflow.com/questions/42510334/how-to-include-jquery-properly-in-angular-cli-1-0-0-rc-0) – Harry Dec 12 '17 at 13:42

1 Answers1

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)

David
  • 33,444
  • 11
  • 80
  • 118
  • 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 ;-) – ssougnez Dec 12 '17 at 14:04
  • 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*? – Rui Pimentel Jul 27 '18 at 13:38
  • You can declare your own interface I guess – David Jul 27 '18 at 13:41