MilitelloVinx MilitelloVinx - 9 months ago 208
jQuery Question

Angular-cli and jQuery plugins

I am trying to use some jQuery plugins in my angular2 app created with angular-cli.

As described in the doc, I installed the libraries I need using npm and, when available, the types too.
I then added styles and scripts in the angular-cli.json, and if I open the chrome debugger I can see that the libraries are correctly loaded.

The problem is that every time I try to use any jQuery plugin, I always get a js error in the console which says "the method is not a function".

I've created a small example using jQuery and fullcalendar, and it's forkable from this GitHub repo.

Note: the problem exists only with JQuery plugins that needs a selector to run (like $("#myItem").fullcalendar() or $(".foo").steps()).
If you use libraries like Sweetalert, the problem doesn't appear.

I am sure I am missing something, but I really cannot figured it out what it is!

Thank you.

Answer Source

Install ( if you didn't )

npm install @types/jquery --save-dev

You need to write manual typing's for your plugin.

Create structure:


Than in index.d.ts something like:

interface JQuery {
  fullCalendar(options?: any): JQuery;

Than in tsconfig.json

"typeRoots": [