Question

我已安装了带有基础的角度6，但我收到了JQuery的错误。

未捕获的语法错误：意外的标识符 ReferenceError：$未定义

在我的组件中，我有

declare var $:any

onNgInit () {
  $(document).foundation()
}

我在angular.json中有所有导入

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

我已尝试过在互联网上找到的所有内容，但仍面临同样的错误。当我使用Angular 4时，还要添加这个用于工作

Answer 1

这与ES6模块隔离的工作方式有关。从angular.json文件加载与index.html文件（全局范围）上的脚本标记相同。在任何组件上导入它时，都会获得新的本地副本，因此请避免以这种方式导入它。

为防止智能感知和编译问题，请创建一个具有以下内容的typings.d.ts文件：

declare var $: any;
declare var jQuery: any;

现在您可以开始了：）

Answer 2

为角度

安装Jquery插件

npm install jquery --save

现在在app.module.ts添加

从“jquery”导入*为$;

它将完成工作。

Answer 3

如果您安装了jquery，但仍然收到此错误。在您使用$的每个组件中，在顶部import * as $ from "jquery";

处添加

Answer 4

始终注意，默认情况下，angular.json中有两个“脚本”部分。大多数开发人员随便在“ scripts”标签中给出引用，就像这样……

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

无需验证他们是否将其添加到测试“脚本”或“构建”脚本中...

但是，只需验证一次将其添加到angular.json的“ build”部分而不是“ test”部分，因为这是开发人员经常犯的愚蠢错误。

错误：

"test"{
   scripts : [
     "node_modules/jquery/dist/jquery.js"
   ]
}

右：

"build"{
   scripts : [
     "node_modules/jquery/dist/jquery.js"
   ]
}

希望这会有所帮助！

Answer 5

对于那些寻求答案的人，解决方案是导入节点类型（我假设您已经使用npm安装--save jquery和foundation-sites）：

npm install --save @types/node

然后在模块下的tsconfig.app.json中，确保类型部分（在compilerOptions下）显示为：

"types": ["node"]

然后在您的代码中：

import * as $ from 'jquery';
const Foundation = require('foundation-sites'); 

.... other declarations etc... 

new Foundation.default.DropdownMenu($("#yourelementid"), {});

我以Dropdown菜单为例，但这应该适用于所有不同的基础插件（尽管我尚未测试）。

Answer 6

对我来说，在 polyfills.ts 中添加以下内容可以解决此问题

import * as jQuery from 'jquery';
window['$'] = jQuery;

注意：也将此添加为对问题的评论

Answer 7

确保您的路径正确无误？

试试这个 [../ node_modules / jquery的/ DIST /的jquery.js]

Answer 8

您可以尝试添加jQuery类型，这是在从npm安装jQuery之后执行的。

npm install --save @ types / jquery

Answer 9

经过多次搜索，这才是真正对我有用的

首先：转到控制台并安装@ types / jquery

top

第二个：转到“ tsconfing.app.json”，位于“ angular.json的同一级别，就在它下面” 并更改

“类型”：[]

到

“类型”：[“ jquery”]

第三：转到ur app.module.ts或app.component.ts并使用此导入：

从“ jquery”中将*导入为$；

提示：您需要将导入添加到app.module.ts或app.component.ts中，以确保将导入应用于整个项目。但是您可以根据需要轻松地将其添加到任何组件中，以仅在其上工作。

最重要的一点：请确保将您的jquery代码添加到要与“ ex：navbar.component.ts”一起使用的组件中，以便它可以高效运行而不会出现故障。

Answer 10

对我来说执行 npm i core-js 工作。希望这对你也有帮助

Answer 11

我尝试了几种解决方案，最后通过在style.css中直接插入样式然后在全局中插入样式，然后在app.component.ts中插入js函数并在app.componet.html中直接插入代码，在这样做并看到它起作用之后，我将所有东西都移到了一个组件中。

试试看：https://stackblitz.com/edit/angular-slick-carousel-r7u74h

Angular 6 ReferenceError：$未定义JQuery错误

11 个答案:

错误：

右：