我使用angular-cli引导了Angular 2应用程序.在我决定使用bootstrap模态之前,一切都很容易.我只是复制了从我们不使用angular-cli的其他项目中打开模态的代码.我将
jquery和bootstrap依赖项添加到angular-cli.json文件中的脚本中. jQuery在项目中被识别,但是当我尝试在角度组件中运行它.$modalEl.modal(options)时,我得到一个错误,即jQuery没有定义.
实际上jQuery被导入到项目中但作为全局$.我做了一些挖掘,显然bootstrap期望jQuery作为’jQuery’变量传递给它.它不会给老鼠的屁股约$.
我可以将jQuery作为变量放在webpack.config.js文件中,就像我们在其他项目中那样:(为简洁起见省略了很多代码)
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配置文件.多谢你们！你很周到.
我已经尝试将jQuery直接导入到Angular组件和https://github.com/angular/angular-cli/issues/3202中提到的一堆其他东西(将进口添加到vendor.ts文件,然后将vendor.ts添加到angular-cli.json中的scripts数组)但没有任何作用.
说实话,我很生气,像在angular-cli中使用引导程序添加jquery依赖这样一个微不足道的问题就是这样一个雷区.
你有没有处理类似的问题？
解决方法
第一步
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")
看看@这link.它有一个工作的例子和一个问题同样的打字和没有它.我在该项目中使用了Angular的bootstrap和jquery,你也可以查看repo.
在你的angular-cli.json中就像这样
"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"
然后在component.declare var $：any中声明;
这应该工作.
UPDATE
我继续使用我提到的步骤在Angular中使用jquery创建一个bootstrap模式.
