如何在 Angular 7 中使用 jQuery 插件

Posted 2023-05-09

【中文标题】如何在 Angular 7 中使用 jQuery 插件

【英文标题】：How use jQuery plugin in Angular 7

【发布时间】：2019-12-16 13:14:07

【问题描述】：

我正在使用一个扩展 jQuery 的 js 插件来转换 xml2json。 (plugin here)

我在旧的 AngularJs 应用程序中使用它并且它工作正常，但现在我已经升级到 Angular7 我不知道如何设置它。

我在 angular.json 文件中包含了 jQuery 和插件，如下所示：

script: [
  "node_modules/jquery/dist/jquery.slim.js", 
  "src/app/plugins/jquery.xml2json.js"  //Note: I've edited the position of the scripts
]

然后我像这样使用它：

// app.component.ts
import * as $ from 'jquery'

export class AppComponent
  myFunction() 
    let xmlDocument = "<tree>test</tree>";
    $.xml2json(xmlDocument);
  

但我收到此错误

_plugins_jquery_xml2json_js__WEBPACK_IMPORTED_MODULE_3__.xml2json is not a function

有什么建议吗？

【问题讨论】：

xml2json 是否需要jQuery？您可能需要先加载 jQuery。

@showdev 是的，但我已经尝试过先加载 jQuery。

也许它需要完整版的jQu​​ery，而不是精简版？

@showdev 我也试过了 :)

先加载jquery，然后用declare let $: any;替换你的import * as $...

【参考方案1】：

据我所见，在 angular.json 文件中引用 javascript 文件时，Angular 编译器会将它们插入到一个文件中，该文件按照您将它们放入 Script 数组中的顺序进行组织。 在您提供的示例中，它会先写入 src/app/plugins/jquery.xml2json.js 内容，然后再写入 node_modules/jquery/dist/jquery.slim.js 内容。

请尝试交换项目的位置，如果可行，请告诉我。

请注意，我找到了这个 NPM 包，您可以使用它来将 xml 转换为 json，我认为这与您使用的相同： https://www.npmjs.com/package/ngx-xml2json

更新 抱歉，我没有注意到您尝试了@showdev 所说的内容。

我已经花时间找到问题，但没有找到解决方案，但我发现 Angular 没有首先加载 jquery，它总是给我undefiend。

如果您可以考虑我提到的 NPM 包，它将解决您的问题。

【参考方案2】：

@David 的评论成功了！我想我不能接受评论作为答案，所以我会自己发布：

// app.component.ts
//import * as $ from 'jquery' <-old

declare let $: any;          
export class AppComponent
  myFunction() 
    let xmlDocument = "<tree>test</tree>";
    $.xml2json(xmlDocument);
  

另外，脚本的位置也很重要。