无法将 Bootstrap 4、jQuery 和 PopperJS 库添加到 .angular-cli.json答案

【问题标题】：Couldn't add Bootstrap 4, jQuery, and PopperJS libraries to .angular-cli.json无法将 Bootstrap 4、jQuery 和 PopperJS 库添加到 .angular-cli.json
【发布时间】：2018-07-15 23:32:07
【问题描述】：

目前我正在尝试在我的 Angular 5 项目中实现 Bootstrap 4 navbar 元素，它需要三个 JS 库，Bootstrap 4、jQuery 和 PopperJS .

当我将以下内容添加到 src/index.html

时，它完美无缺（即没有发生错误）

<head>
...
...
...
<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>
</head>

但是，我想通过将这 三个 JS 库添加到 .angular-cli.json（而不是在 src/index.html 上使用 CDN）来做一个实验，所以我做了以下：

在.angular-cli.json，我补充说：

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

注意：在将这三个脚本添加到 .angular-cli.json 之前，我已经使用 npm 安装了 Bootstrap 4、jQuery 和 PopperJS 包。

运行时控制台报错（Chrome Dev Tool）

Uncaught SyntaxError: Unexpected token export         scripts.bundle.js:2302

当点击它带到这一行的错误信息时

export default Popper;

我对正在发生的事情以及问题的真正原因有点困惑？如何解决此错误？

【问题讨论】：

您是否创建了任何提供程序？
还没有，需要吗？
尝试将popper脚本链接更改为"../node_modules/popper.js/dist/esm/popper.js"stackoverflow.com/questions/46092871/…
事实证明，有效的是umd而不是esm

标签： javascript jquery angular bootstrap-4 popper.js

【解决方案1】：

npm install --save bootstrap jquery popper.js

angular-cli.json:

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

现在你可以启动你的应用了

【讨论】：