0

I want to use a jQuery plugin named jquery.shorten in Ionic project using npm.

The command for installig it is npm install jquery.shorten --save.

I have successfylly included jQuery and I am able to use it in my project. But not able to use jquery.shorten.

Following is the code which I am using to inclide jQuery and jquery.shorten. It is in app.module.ts of angular project - 

import * as $ from 'jquery';
import 'jquery.shorten';

The error which I am seeing in console is -

Uncaught Error: Cannot find module "jquery.shorten"

I also tried following. This time all console error gone. But I can't find a way of using it.

import * as shortMe from 'jquery.shorten';

It should be used as $(".dynamic-multiple-elements").shorten().

I have followed few instructions to have it included. But nothing seems to be working. I can see the folder jquery.shorten with required js file in node_modules.

I won't be able to use this solution as my elements are dynamic and many.

Improve this question
13
  • import 'jquery.shorten'; will look in the package.json and tries to load the file specified with "main". In case of jquery.shorten this is set to ''main": "jquery.shorten.js". Unfortunately, there is no such file on root level. So I guess you have to import it via import 'jquery.shorten/src/jquery.shorten'; Besides that, I wouldn't recommend to use jQuery in Angular at all. Commented Aug 22, 2017 at 7:42
  • What is the reason using jQuery with Angular4? Commented Aug 22, 2017 at 7:43
  • @Sebastian, I am working on an Ionic project. I tried to import jquery.shorten using specific path similar to what you have suggested. I am currently getting error saying "jQuery" is not defined even if I have imported it and included tyings for it. I will check different ways of importing it. Commented Aug 22, 2017 at 9:13
  • @Stwosch, jQuery is very rarely used in my project (2 line to be exact). It makes targetting little easier than Angular. But I am going to use two plugins, jquery.shorten(for collapsing large messages) and enjoyhint(for user guide). I coudn't find any alternate solutions of above two, this is why I need to incliude jQuery in my project. Commented Aug 22, 2017 at 9:17
  • when does it say jQuery" is not defined? During compilation or when the application starts? Commented Aug 22, 2017 at 9:52

2 Answers 2

Reset to default
0

You can see here how to use the of JQuery and other third-party globals in Angular.

To simple way without InjectionToken, you can do:

npm install jquery --save.

npm install jquery.shorten --save.

Add two scripts reference in angular-cli.json 

...
"scripts": [
   "../node_modules/jquery/dist/jquery.min.js",
   "../node_modules/jquery.shorten/src/jquery.shorten.min.js"
],
...

If you dont use the angular-cli put the script in webpack.

In any component use:

declare let $ : any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

   ngOnInit(): void {
      console.log($);
      $('#text').shorten();    
   }
}

Component html to test 

<p id="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Oh, I lokked at this answer before. At the first time it looked ind of complex to me. I am looking on a way of including it in simplest way. I am currently looking at this solution (which is kind of hack), but I will come back with best solution.
Ok, I simulated here with the simple way and works fine. I will update the answer.
Your solution looks promising (I haven't tested). But I want even better solution which doesn't require very specific paths. See what I have posted as an answer. It can be better if we can remove necessity of editing webpack.config.js. @Sebastian has suggested a good solution. But I am getting errors in console related with undefined jQuery.
0

Okay, here is what I have implemented (using this) which is working perfectly.

1. app.module.ts - So that my imports gets available in all components.

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

2. I added following codes to webpack.config.js - 

plugins: [
   new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery"
    })
]

3. Declared variables declare let $: any; and declare let jQuery: any; in home.ts where I want to use both jQuery and jquery.shorten

Problem - The file webpack.config.js is present under node-modules folder. There is a very good chance that it could get replaced while transfering codes or during reinstalling npm.

Expectation - Changes should remain even if project files get transfered.

I want solution similar to this solution if it is possible.

Improve this answer

1 Comment

I want to have this issue solved in without any workaround. @Sebastian has provided almost similar solution. But for some reason we are getting error that jQuery is not defined.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.