如何在 Angular 8 应用程序中使用 jQuery？

Question

我有一个利用 SignalR 与桌面应用程序通信的应用程序。要利用 SignalR，我需要在我的 .ts 文件中使用 jQuery。但是，从 Angular 7 迁移到 Angular 8 后似乎不起作用。

我使用 declare var $: any; 就像我在以前版本的 Angular 中一样。不幸的是，$ 现在向控制台打印空白。

那么，Angular v8 是否不再支持以这种方式使用 jQuery，或者在迁移过程中是否存在其他问题？

更新：

我通过 npm 加载了 jQuery v3.3.1。

这使它成为全球性的（在 angular.json 中）

 "scripts": [
         "./node_modules/jquery/dist/jquery.min.js",
         "./node_modules/signalr/jquery.signalR.js"
]

原文由 Irrelevant_Coder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

所以，在稍微离开这个问题并使用 roberts answer 确认 jQuery 在 app.module.ts 中工作之后（我不知道 console.log 会在导入过程中工作），我意识到我有上次我将 v4 升级到 v7 时解决了这个问题。

发生了什么，是一个依赖导致 jQuery 被重新加载。启动 signalR 通信的应用程序部分还加载了另一个依赖项 (telerik-angular-report-viewer)，这导致 console.log($) 不显示任何内容，因为 jQuery 尚未加载到组件中。

修复：

删除以下代码

window.jQuery = jQuery;
window.$ = jQuery;

来自以下文件

• 依赖项\telerikReportViewer.kendo.min.js
• 依赖项\telerikReportViewer.js
• cjs\telerik-report-viewer.component.js
• es\telerik-report-viewer.component.js

原文由 Irrelevant_Coder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不使用更优雅的方式

declare var $: any;

第一次运行

npm install jquery --save
npm install @types/jquery --save

然后在架构师的脚本部分 => 构建 angular.json 文件添加 jquery lib 的路径

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

然后在你的 tsconfig.app.json

 {
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["jquery"] // add here
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

所以现在你可以在你的项目中的任何地方使用 jquery 而无需使用 declare var $ : any 对于每个你需要使用 jquery 的文件

原文由 Tony Ngo 发布，翻译遵循 CC BY-SA 4.0 许可协议