MilitelloVinx MilitelloVinx - 28 days ago 30
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.

https://github.com/vmilitello/jquery-plugin

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

Install ( if you didn't )

npm install @types/jquery --save-dev

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

Create structure:

/custom_typings
 /fullcalendar
  /index.d.ts

Than in index.d.ts something like:

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

Than in tsconfig.json

"typeRoots": [
  "../node_modules/@types",
  "../custom_typings"
]