jQuery没有在bootstrap-sass中定义 [英] jQuery is not defined in bootstrap-sass
问题描述
我使用angular-cli引导了Angular 2应用程序.直到我决定使用bootstrap modal之前,一切都是轻而易举的.我只是从其他不使用angular-cli的项目中复制了用于打开模态的代码.我在angular-cli.json文件中的脚本中添加了jquery和bootstrap依赖项. jQuery在项目中是公认的,但是当我尝试在角度组件中运行this.$modalEl.modal(options)
时,出现错误jQuery is not defined
.
I bootstrapped the Angular 2 app using angular-cli. Everything was easy-peasy until I decided to use bootstrap modal. I simply copied the code for opening the modal from our other project that doesn't use angular-cli. I added jquery and bootstrap dependencies to scripts in angular-cli.json file. jQuery is recognised in the project, but when I try to run this.$modalEl.modal(options)
inside angular component I get an error that jQuery is not defined
.
实际上,jQuery是作为全局$
导入到项目中的.我做了一些挖掘,显然引导程序希望将jQuery作为"jQuery"变量传递给它.它不会给$
带来麻烦.
Actually jQuery is imported into project but as a global $
. I've done some digging and apparently bootstrap expects jQuery to be passed into it as a 'jQuery' variable. It doesn't give rat's ass about $
.
我可以像在其他项目中一样在webpack.config.js
文件中将jQuery
公开为变量:(为简洁起见,省略了很多代码)
I could expose jQuery
as a variable in webpack.config.js
file like we do in other project: (a lot of code omitted for brevity)
var jQueryPlugin = {
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery'
}
exports.root = root;
exports.plugins = {
globalLibProvider: new webpack.ProvidePlugin(webpackMerge(jQueryPlugin, {
svg4everybody: 'svg4everybody/dist/svg4everybody.js'
}))
}
但是angular-cli
开发人员团队决定不让其他开发人员混入Webpack配置文件.多谢你们!非常想你.
but angular-cli
dev team decided not to let other devs meddle with webpack config files. Thanks guys! Very thoughtful of you.
我尝试将jQuery直接导入Angular组件以及此处提到的其他内容 https://github.com/angular/angular-cli/issues/3202 (将导入内容添加到vendor.ts文件中,然后将vendor.ts添加到angular-cli.json中的脚本数组中),但没有任何效果.
I've tried importing jQuery directly into Angular component and a bunch of other things mentioned here https://github.com/angular/angular-cli/issues/3202 (adding imports to vendor.ts file and then adding vendor.ts to scripts array in angular-cli.json) but nothing works.
说实话,我很生气,像在angle-cli中添加jquery
依赖项与bootstrap
一起使用这样的琐碎问题就是这样的雷区.
To be honest, I am quite pissed that such a trivial issue like adding jquery
dependency to be used with bootstrap
in angular-cli is such a minefield.
您处理过类似的问题吗?
Have you dealt with similar problem?
推荐答案
第一步
npm install jssha --save [using jssha for this demo]
It it is your own custom file place it in the scripts array of angular-cli.json skip this step 1
第二步
Add the jssha scripts file in .angular-cli.json file
"scripts": [ "../node_modules/jssha/src/sha.js" ]
Step three Adding a var in component to be used as a global variable
//using external js modules in Angular Component
declare var jsSHA: any; // place this above the component decorator
shaObj:any;
hash:string;
this.shaObj = new jsSHA("SHA-512", "TEXT");
this.shaObj.update("This is a Test");
this.hash = this.shaObj.getHash("HEX")
在此链接中查看.它有一个有效的示例,并提供了一个有关键入(不包含键入)的问题.在该项目中,我已经在Angular中使用了bootstrap和jquery,您也可以检查存储库.
Take a look @ this link. It has a working example and a question for the same with typings and without it. I have used bootstrap and jquery with Angular in that project, you can check the repo too.
在您的情况下,您需要添加jquery文件
In your case you need to add the jquery files
像这样
"styles": [
"../node_modules/bootstrap-v4-dev/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/bootstrap-v4-dev/dist/js/bootstrap.min.js"
,然后在组件中声明.declare var $: any;
and then declare in component.declare var $: any;
这应该有效.
更新
我继续使用我提到的步骤,仅使用Angular中的jquery来创建引导程序的模式.
I went on to create a modal of bootstrap using just jquery in Angular using the steps i mentioned.
有效.检查此gh页面链接- LINK .
It works Check this gh page link - LINK.
,如果您要检查源代码以进行相同的检查,请 LINK .
and if you want to check the source code for the same check LINK.
我发布的答案来自此链接,这是我在Angular上的页面 LINK
The answer i posted came from this link this is my page on Angular LINK
这篇关于jQuery没有在bootstrap-sass中定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!