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

Question

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

我使用 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

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 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，而无需为每个需要使用 jquery

的文件使用 declare var $ : any

Answer 3

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

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

修复：

删除以下代码

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

来自以下文件

dependencies\telerikReportViewer.kendo.min.js
dependencies\telerikReportViewer.js
cjs\telerik-report-viewer.component.js
es\telerik-report-viewer.component.js

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

How can I use jQuery in an Angular 8 app?

javascript

node.js

typescript

angular

angular8