Angular-cli and jQuery plugins

Question

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.

Vlado Tesanovic · Accepted Answer · 2016-11-08 21:34:45Z

1

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"
]

edited Nov 8, 2016 at 21:34

answered Nov 8, 2016 at 8:46

Vlado Tesanovic

6,4242 gold badges22 silver badges32 bronze badges

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

3 Comments

Militello Vincenzo Over a year ago

My problem is not with types. What you suggest just let me avoid to cast the jQuery selector while I am writing my typescript file. Basically instead of (<any>$("#calendar")).fullcalendar();, I can write $("#calendar").fullcalendar();. But this is barely related to my question. I updated the branch on GitHub to demonstrate that this solution doesn't work. Thank you anyway.

Vlado Tesanovic Over a year ago

name your typing file index.d.ts not index.ts, and jQuery function is not fullcalendar, it is fullCalendar, i tried it on your repo and it works

Militello Vincenzo Over a year ago

Thank you! I was actually playing around with some guys on gitter.im, and we found the problem as well. Thank you for updating the branch! Appreciate it. I will leave the branch there hoping that it could help someone else. Thanks!

Andreev Dmitri · Accepted Answer · 2017-10-12 07:39:35Z

0

All correct besides one small detail without which it is not working. As mentioned here in the last part, you must have in your component

declare var $:any

Then $ will be global and will see the fullCalendar() function, otherwise it did not work for me.

answered Oct 12, 2017 at 7:39

Andreev Dmitri

223 bronze badges

Collectives™ on Stack Overflow

Angular-cli and jQuery plugins

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related