jQuery 没有在 bootstrap-sass 中定义答案

【问题标题】：jQuery is not defined in bootstrap-sassjQuery 没有在 bootstrap-sass 中定义
【发布时间】：2018-01-02 11:59:34
【问题描述】：

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

说实话，我很生气这样一个微不足道的问题，比如在 angular-cli 中添加 jquery 依赖以与 bootstrap 一起使用是一个雷区。

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

【问题讨论】：

为什么说“angular-cli 开发团队决定不让其他开发人员干预 webpack 配置文件”？
@KScandrett 因为 angular-cli 不公开 webpack 配置文件。您通过 angular-cli.json 配置应用程序。 Angular-cli 基于它创建 webpack 配置，但是没有直接的方法来编辑 webpack 配置文件而不求助于一些 hack。团队决定抽象 webpack 配置，因为这对于初学者来说非常困难。我不同意他们的决定，因为它使配置某些您无法在 angular-cli.json 文件中设置的东西变得更加困难。
为什么不直接弹出它ng eject 并编辑它？
这是一个公平的观点。 github.com/angular/angular-cli/wiki/eject 退出应用后还能使用 angular-cli 生成器吗？
我没试过。如果生成器不工作，你可以做github.com/aspnet/JavaScriptServices/issues/…。

标签： jquery angular webpack angular-cli bootstrap-sass

【解决方案1】：

我没有专门将 Bootstrap 与 Angular 2 一起使用，但我使用 Angular 1 并且情况相同，因为 Bootstrap 的常规版本是为与 jQuery 一起工作而设计的，而不是在构建时考虑到 Angular。您当然可以安装 jQuery，但 Javascript 在 Angular 的上下文中可能无法正常工作。

最简单的解决方案是使用基于 Angular 构建的版本，我相信 ng-bootstrap 是其中最突出的。我自己没有使用过，但我已经为 Angular 1 使用了 angular-ui-bootstrap，这似乎是同一个项目的 Angular 2 对应物。

或者，你可以wrap it in a directive yourself，但如果你能让 ng-bootstrap 做你想做的事，我会避免这样做，因为它会做更多的工作。

【讨论】：

他必须升级到 Angular 4 才能使用ng-bootstrap。一旦完成，他们的模态组件就会很好地工作。
@Matthew Daly 这并不能完美地回答我的问题，但它仍然是最好的解决方案。 Ng-bootstrap 非常优雅，不依赖 jQuery。所以我在我的依赖项中用 ng-bootstrap 替换了 bootstrap-sass 和 jQuery。
很高兴它解决了您的问题。显然，如果需要，您可以创建自己的指令来包装它（有时这是唯一的解决方案，特别是如果您正在使用相对晦涩的东西），但对于像 Bootstrap 这样常见的东西，几乎始终是一个现有的解决方案，如果您需要多个组件，如果您选择自己做，那么您需要为自己做很多工作。

【解决方案2】：

第一步

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。

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

然后在component.declare var $: any;中声明

这应该可行。

更新

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

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

如果你想查看源代码，请查看LINK。

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

【讨论】：

但是为什么我需要在我的项目中添加jssha？
这是你的例子的演示，它将是 jquery，我提到了这个[using jssha for this demo]
那么在这种情况下，您的回答并不能解决我的问题，我已经在 angular.cli.json 文件中的脚本数组中添加了 jquery 依赖项。问题似乎是 jQuery 将 $ 公开为全局变量，而 bootstrap-sass 期望 jQuery 而不是 $ 符号。
您还需要在组件中声明该变量，例如 | declare var $: any;
@codepic 没问题，我这样做不是为了赏金，只是因为它需要共享信息

【解决方案3】：

您可以使用命令 ng eject 让 Angular CLI 生成 webpack.config 文件。

然后像以前一样将 jQuery 公开为变量。

【讨论】：