Using an existing js library (jQuery) in ionic 2

I have folder containing about 14 js files, all using jQuery. This is a library/api provided by a third part to communicate with their services.

What is the best practices/approach for implementing such a collection into an ionic 2 project?

Do I wrap the api up in a cordova plugin (if so, how)?
Do I just dump them into a folder in the ionic project? In for instance app/providers or in the www directory?
If so, how do I import the classes defined by the API?

My project is using typescript, though I understand that regular js files are fine in those as well. I still have to call the library from ts though.

Cheers.

You should put your files to www/build/js directory and import them in the index.html file with <script src="build/js/jquery-1.12.3.min.js"></script>

Isn’t the build directory cleared when rebuilding?
(That’s the behaviour I’m used to in other environments, particularly Java and Android)

Oups, yes you’re right. But only the build directory, you can create a new directory or use the lib directory .

1 Like

You could create the gulp task
Custom font in Component (ionic 2):

PS: I strongly recommend you don’t use jQuery with Angular 2. jQuery selector is slow and it works directly with DOM

1 Like

@xr0master, I’m not overly keen on having to rewrite even Microsofts code for the UCWA helper libraries, which are the ones in question.
But I was suspecting that adding jQuery to the mix could result in some unexpected behaviour.

I would suggest you to check if this library is available on NPM and add it as dependency in such case. Otherwise you can add the files in a new directory under www (e.g. lib) and then create a gulp task to copy them to the build folder, as @xr0master suggested. You can find a sample implementation in the linked post:

Then you can just include the resulting file and use the API in your project.

You might also need to install type definitions for the libraries as well.

1 Like