Angular 6 ReferenceError：$ 未定义 JQuery 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50793325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 6 ReferenceError: $ is not defined error with JQuery
提问by user3701188
I have installed angular 6 with foundation but I am getting an error with JQuery.
我已经安装了带有基础的 angular 6，但是我在使用 JQuery 时遇到错误。
Uncaught syntaxerror: unexpected identifier ReferenceError: $ is not defined
未捕获的语法错误：意外的标识符 ReferenceError：未定义 $
In my component, i have
在我的组件中，我有
declare var $:any
onNgInit () {
$(document).foundation()
}
I have all imports in my angular.json
我的 angular.json 中有所有导入
scripts : [
"node_modules/jquery/dist/jquery.js"
]
I have tried everything I found on the internet but still facing the same error. Also to add this used to work when I was working with Angular 4
我已经尝试了我在互联网上找到的所有内容，但仍然面临同样的错误。还要添加这个用于在我使用 Angular 4 时工作的
回答by elvin
This is something related to the way ES6 modules isolation works. Loading from the angular.jsonfile is the same as the script tag on an index.html file (the global scope). When you import it on any component you're getting a new local copy, so avoid importing it this way.
这与 ES6 模块隔离的工作方式有关。从angular.json文件加载与index.html 文件（全局范围）上的脚本标记相同。当您在任何组件上导入它时，您都会获得一个新的本地副本，因此请避免以这种方式导入它。
To prevent intellisense and compiling issues, create a typings.d.tsfile with the following content:
为防止智能感知和编译问题，请创建一个typings.d.ts包含以下内容的文件：
declare var $: any;
declare var jQuery: any;
Now you're ready to go :)
现在你准备好了:)
回答by BlizZard
Install Jquery Plugin For angular
为 angular 安装 Jquery 插件
npm install jquery --save
npm 安装 jquery --save
Now in your app.module.tsadd
现在在您的app.module.ts添加
import * as $ from "jquery";
import * as $ from "jquery";
It will make the work done.
它将使工作完成。
回答by karoluS
If you have jquery installed and still getting this error. In every component where you are using $add at the top import * as $ from "jquery";
如果您安装了 jquery 并且仍然收到此错误。在您使用的每个组件中$，在顶部添加import * as $ from "jquery";
回答by tstopak
For those looking for an answer to this the solution is to import node types (I am assuming you have already used npm to install --save jquery and foundation-sites):
对于那些正在寻找答案的人，解决方案是导入节点类型（我假设您已经使用 npm 来安装 --save jquery 和基础站点）：
npm install --save @types/node
npm install --save @types/node
then in your tsconfig.app.jsonunder your module, make sure the types section (under compilerOptions) reads:
然后在您tsconfig.app.json的模块下，确保类型部分（下compilerOptions）显示：
"types": ["node"]
"types": ["node"]
then in your code:
然后在你的代码中：
import * as $ from 'jquery';
const Foundation = require('foundation-sites');
.... other declarations etc...
new Foundation.default.DropdownMenu($("#yourelementid"), {});
I'm using Dropdown menu as an example but this should work with all of the different foundation plugins (I have not tested though).
我以下拉菜单为例，但这应该适用于所有不同的基础插件（虽然我没有测试过）。
回答by Fawad Mukhtar
make sure your path is correct ?
确保你的路径是正确的？
try this [../node_modules/jquery/dist/jquery.js]
试试这个 [../node_modules/jquery/dist/jquery.js]
回答by Gireesh Kudipudi
For me adding the following to the polyfills.tssolved this issue
对我来说，将以下内容添加到polyfills.ts解决了这个问题
import * as jQuery from 'jquery';
window['$'] = jQuery;
Note: Added this as a comment to the question as well
注意：将此添加为对问题的评论
回答by Mohit Dixit
Always take care that there are by default two "scripts" sections in angular.json. Most of the developers casually giving the reference in "scripts" tag like this...
始终注意 angular.json 中默认有两个“脚本”部分。大多数开发人员随便在“脚本”标签中给出这样的引用......
scripts : [
"node_modules/jquery/dist/jquery.js"
]
without verifying if they are adding this to test "script" or the "build" script...
无需验证他们是否将其添加到测试“脚本”或“构建”脚本...
However, just verify once that you are adding this to "build" section and not in "test" section in angular.json as this is the silly mistake a developer always do.
但是，只需验证一次您将其添加到“构建”部分而不是 angular.json 的“测试”部分，因为这是开发人员经常犯的愚蠢错误。
wrong:
错误的：
"test"{
scripts : [
"node_modules/jquery/dist/jquery.js"
]
}
right:
对：
"build"{
scripts : [
"node_modules/jquery/dist/jquery.js"
]
}
Hope this helps!
希望这可以帮助！
回答by Dale C
You can try adding the jQuery types, I do this after I install jQuery from npm.
您可以尝试添加 jQuery 类型，我在从 npm 安装 jQuery 后执行此操作。
npm install --save-dev @types/jquery
npm install --save-dev @types/jquery
