jQuery没有在bootstrap-sass中定义

Question

我使用angular-cli引导了Angular 2应用程序.在我决定使用bootstrap模态之前,一切都很容易.我只是复制了从不使用angular-cli的其他项目中打开模态的代码.我将jquery和bootstrap依赖项添加到angular-cli.json文件中的脚本中.jQuery在项目中被识别,但是当我尝试this.$modalEl.modal(options)在角度组件内运行时,我得到一个错误jQuery is not defined.

实际上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依赖性bootstrap就是这样一个雷区.

你有没有处理类似的问题？

Answer 1

步骤1

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")

看看@这个链接。它有一个工作示例和一个与打字和不打字相同的问题。我在该项目中使用了 bootstrap 和 jquery 以及 Angular，你也可以查看 repo。

在您的情况下，您需要添加 jquery 文件

像这样在你的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"

然后在组件中声明。declare var $: any;

这应该有效。

更新

我继续使用我提到的步骤在 Angular 中仅使用 jquery 创建引导模式。

它有效 检查此 gh 页面链接 - LINK。

如果您想检查相同的源代码，请检查LINK。

我发布的答案来自此链接这是我在 Angular 上的页面LINK