如何在 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"
]

Answer 1

不使用更优雅的方式

declare var $: any;

第一次运行

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

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

"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，而无需为每个需要使用 jquery 的文件使用 declare var $ : any

Answer 2

Angular 8 适用于 JQuery。

 "dependencies": {
  ...
  "jquery": "^3.4.1",
  ...
}

在您的 angular.json 文件中导入所需的文件，如下所示：

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

开头没有./，只有node_modules/...

在你的 app.module 中验证它是这样工作的：

import { AppComponent } from './app.component';

declare var $: any;
console.log(`jQuery version: ${$.fn.jquery}`);

@NgModule({

在开发者工具控制台中它应该打印这个：

jQuery 版本：3.4.1

Answer 3

所以，在稍微远离这个问题并使用 roberts 回答确认 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