Bootstrap 4 依赖 Popper Js 在 Angular 上抛出错误答案

【问题标题】：Bootstrap4 dependency PopperJs throws error on AngularBootstrap 4 依赖 Popper Js 在 Angular 上抛出错误
【发布时间】：2018-01-20 14:45:23
【问题描述】：

我刚刚创建了一个全新的angular-cli 项目
并跑了npm install bootstrap@4.0.0-beta jquery popper.js --save
并将.angular-cli.json的相关部分更改如下

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/popper.js/dist/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

但是收到下面的错误

10:2287 Uncaught SyntaxError: Unexpected token export
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at Object.2 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at webpackJsonpCallback (bootstrap 4403042439558687cdd6:25)
    at scripts.bundle.js:1

知道怎么解决吗？

【问题讨论】：

奇怪，我让它为我工作。你用的是最新的cli吗？你可以尝试重新安装 node_modules
错误一定在其他地方
@LLai @angular/cli: 1.3.0 node: 6.11.2 npm: 5.3.0 您是否更改了 .angular-cli.json 中的部分，如果您没有更改，您将不会在控制台中看到错误。
是的，我有你确切的脚本和样式。 jquery@3.2.1 popper.js@1.11.1 bootstrap@4.0.0-beta
我不确定这会有多大帮助，但您可以在 page 上查看这个问题，有一个关于如何添加第三方库的问题

标签： angular-cli twitter-bootstrap angular webpack popper.js

【解决方案1】：

我可以看到很多人都在努力添加和正确包含 Bootstrap 4 依赖项（jQuery、popper.js 等）。但是https://ng-bootstrap.github.io 的形式有一个更简单的解决方案。

ng-bootstrap 提供从头开始编写的 native Angular 指令。积极的后果是： * 你不需要包含和担心 jQuery、popper.js 等。 * 指令提供在 Angular 世界中“有意义”的 API

对于任何尝试将 Bootstrap 4.beta 与 Angular 一起使用的人 - ng-bootstrap 刚刚发布了它的第一个测试版，它与 Bootstrap 4.beta CSS 完全兼容

【讨论】：

如果你使用 Angular 会更容易，但如果你使用 AngularJS 则不会......
嗯，问题是关于 Angular 和 angular-cli 所以不知道为什么 AngularJS 在这里被提出......

【解决方案2】：

查看https://getbootstrap.com/docs/4.2/getting-started/introduction/#js 的文档，您可以看到它们导入了以下内容：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

注意命名：jquery.slim.min.js、umd/popper.min.js！

因此我在.angular-cli.json 中使用了以下内容：

      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.slim.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

之后它似乎现在可以工作了。

【讨论】：

您的 packages.json 中有什么用于 jquery？在我的 node_modules jquery 文件夹中，我没有 jquery.slim.min.js。实际上只是在 jquery 3.2.1 中找到它
我的 package.json 对于 jquery 看起来如下：` "jquery": "^3.2.1"` 我也用完整的 jquery 版本对其进行了测试，它似乎也可以工作。只有 **umd**/popper.min.js 似乎是必需的。
这个答案有 76 人赞成...开发人员给出了一个尖刻的“RTFM”/接近 Github 问题，问了同样的问题?
是否使用 jQuery-slim 无所谓，但使用 popper.js 的 umd 版本修复它，谢谢！
在 popper 依赖中使用 /dist/umd 而不是 /dist 就可以了。谢谢。

【解决方案3】：

我遇到了同样的问题。我的解决方案是不导入 dist 文件夹 (./node_modules/popper.js/dist/popper.js)，而是导入 umd 文件夹 (./node_modules/popper.js/dist/umd/popper.js）。获取 js 文件的迷你版还是普通版都没关系。

【讨论】：

【解决方案4】：

如果您使用 Asp.net Mvc umd 也可以这样做。

与https://stackoverflow.com/a/50839939/8497522 一样，只需添加 BundleConfig.cs：

bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/umd/popper.js"));

除了：

bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/popper.js"));

【讨论】：

【解决方案5】：

要运行模态，请将 tsconfig.ts 中的目标从“es2015”更改为“es5”

"styles": [ "src/styles.css", 
            "node_modules/bootstrap/dist/css/bootstrap.min.css" ], 
"scripts": ["node_modules/jquery/dist/jquery.min.js", 
            "node_modules/popper.js/dist/umd/popper.min.js", 
            "node_modules/bootstrap/dist/js/bootstrap.min.js"] 
}

【讨论】：

【解决方案6】：

在上面的答案中找到提示：

1)在引导之前包含popper.js

更新 popper.js 文件的路径。使用/dist/umd 而不是/dist

popper 的正确路径在 angular-cli.json 文件中

./node_modules/popper.js/dist/umd/popper.js

【讨论】：