jQuery 未在 bootstrap-sass 中定义

Question

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

实际上 jQuery 被导入到项目中，但作为全局 $。我做了一些挖掘，显然 bootstrap 期望 jQuery 作为 'jQuery' 变量传递给它。它不会给 $ 的老鼠屁股。

我可以像在其他项目中那样在 webpack.config.js 文件中将 jQuery 作为变量公开：（为简洁起见，省略了很多代码）

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一起使用这样的小问题就是这样一个雷区。

你处理过类似的问题吗？

Answer 1

我没有专门将 Bootstrap 与 Angular 2 一起使用，但我已经将 Angular 1 与 Angular 1 一起使用，情况与 [=26= 的常规版本相同] 旨在与 jQuery 一起使用，而不是 uilt 考虑到 Angular。您当然可以安装 jQuery，但 Javascript 在 Angular 的上下文中可能无法按预期工作。

最简单的解决方案是使用 built 版本并考虑 Angular，我相信 ng-bootstrap 是其中最突出的。我自己没用过，但我用 angular-ui-bootstrap 表示 Angular 1，这似乎是 Angular 2 的对应物同一个项目。

或者，您可以 wrap it in a directive yourself，但如果您可以让 ng-bootstrap 执行您想要的操作，我会避免这样做，因为这会增加很多工作量。

Answer 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。它有一个工作示例和一个关于打字和不打字的问题。我在那个项目中使用了 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 创建 bootstrap 的模式。

有效检查此 gh 页面 link - LINK.

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

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

Answer 3

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

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

jQuery 未在 bootstrap-sass 中定义

jQuery is not defined in bootstrap-sass

jquery

bootstrap-sass

webpack

angular-cli

angular