jQuery 未在 bootstrap-sass 中定义 [英] jQuery is not defined in bootstrap-sass

问题描述

我使用 angular-cli 引导了 Angular 2 应用程序.一切都很简单，直到我决定使用引导模式.我只是从我们的另一个不使用 angular-cli 的项目中复制了用于打开模态的代码.我向 angular-cli.json 文件中的脚本添加了 jquery 和 bootstrap 依赖项.jQuery 在项目中被识别，但是当我尝试在 angular 组件中运行 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 $.

我可以像在其他项目中那样将 jQuery 作为变量暴露在 webpack.config.js 文件中:(为了简洁省略了很多代码)

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.

老实说，我很生气，像在 angular-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")

看看@这个链接.它有一个工作示例和一个相同的问题，包括打字和不打字.我在那个项目中使用了 Bootstrap 和 jquery 和 Angular，你也可以查看 repo.

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

像这样在你的 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 创建了一个引导模式.

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屋！