jQuery没有在bootstrap-sass中定义

GO2020-05-28

我使用angular-cli引导了Angular 2应用程序。直到我决定使用bootstrap modal之前，一切都是轻而易举的。我只是从其他不使用angular-cli的项目中复制了用于打开模态的代码。我在angular-cli.json文件中的脚本中添加了jquery和bootstrap依赖项。jQuery在项目中是公认的，但是当我尝试this.$modalEl.modal(options)在角度组件中运行时，出现错误jQuery is not defined。

实际上jQuery是导入到项目中的，但是是全局的$。我做了一些挖掘，显然引导程序希望将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就是这样的雷区。

您是否处理过类似的问题？

村村2020/05/28 15:00:21

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

看看@这个链接。它有一个有效的示例，并提供了一个有关键入是否不包含示例的问题。我在该项目中使用了Angular的bootstrap和jquery，您也可以检查存储库。

在您的情况下，您需要添加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"