Using an existing js library (jQuery) in ionic 2

Ionic Framework ionic-v3
1

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.

2

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>

3

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

4

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

1 Like
5

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
6

@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.

7

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