在TypeScript / Angular 4中导入jQuery插件'jquery.shorten' [英] Importing jQuery plugin 'jquery.shorten' in TypeScript/Angular 4

问题描述

我想在Ionic项目中使用名为 jquery.shorten 的jQuery插件 npm 。

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

installig它是 npm install jquery.shorten --save 。

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

我已成功包含 jQuery ，我可以在我的项目中使用它。但是无法使用 jquery.shorten 。

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

以下是我用来包含 jQuery 和 jquery.shorten <的代码/ code>。它位于 app.module.ts of angular project -

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 -

未捕获错误：找不到模块jquery.shorten

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';

它应该用作 $（。dynamic-multiple-elements ）.shorten（）。

我跟着几个说明将其包括在内。但似乎没有任何效果。
我可以在 node_modules 中看到文件夹 jquery.shorten 和所需的js文件。

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.

推荐答案

好的，这是我实施的内容（使用这个）这是完美的。

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

1。 app.module.ts - 这样我的导入就可以在所有组件中使用。

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

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

2。我在 webpack中添加了以下代码.config.js -

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

3. 声明变量声明let $：any; 和声明让jQuery：any ; 在 home.ts 其中我想同时使用 jQuery 和 jquery.shorten

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

问题 - 文件 webpack.config.js 出现在 node-modules 文件夹下。在转移代码或重新安装npm期间，它很有可能被替换。

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.

这篇关于在TypeScript / Angular 4中导入jQuery插件'jquery.shorten'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！