Importing old jquery plugin in ionic

Ionic Framework ionic-v3
1

I have asked same question on Stackoverflow. I have given one working solution there which I can’t use in normal applications (requires editing inside node_modules folder).

And I can’t use solution mentioned by me or Leonardo Oliveira because Ionic application doesn’t contains angular-cli.json or webpack.config.js outside of node_modules folder.

The jquery.shorten is an old plugin which I want to import in Ionic using import(if possible).

This is how I am importing jQuery and jquery.shorten -

import * as jQuery from 'jquery';
import 'jquery.shorten/src/jquery.shorten';

I have also tried following way -

import 'jquery';

declare let $: any;
declare let jQuery: any;

import 'jquery.shorten/src/jquery.shorten';

Both give error (on main page) -

Runtime Error
jQuery is not defined

And in console -

Uncaught ReferenceError: jQuery is not defined. (points to line 151 of “jquery.shorten.js” which is “})(jQuery)”)

If I include CDN of jQuery in index.html, then things work perfectly. But this is the last solution I want.
I have also tried this solution. But generates random errors.

Does anybody know how to import old jQuery plugins using import in Ionic? Or someway to use angular-cli.json in this case?

My project is running on Ionic 3.9.2. And I can use jQuery in my project as it can be used.

2

I think it’s going to cause headaches having two dueling frameworks trying to manage the DOM, so I would look for alternative implementations. ng2-truncate looks promising, and you could have a conditional “show more” button that displays based on the length of the text. All in all, I think you could get a custom component written that does what you want fairly easily without involving jQuery at all.

3

Thank you @rapropos, but my thick head couldn’t get to manage ng2-truncate :grin:.
But I converted the jquery.shorten to manageble JavaScript suitable for my requirement and used it as a function.

4

Best of luck, but you might want to take a look at this thread.