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

标签 javascript jquery angular bootstrap-4 popper.js

目前我正在尝试在我的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(而不是使用CDN 位于 src/index.html 上),所以我执行了以下操作:

.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 开发工具)出现错误

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

当点击出现此行的错误消息时

export default Popper;

我对发生的事情有点困惑,问题的真正原因是什么? 如何修复这个错误?

最佳答案

  1. npm install --save bootstrap jquery popper.js
  2. 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"
      ],
    

现在您可以启动您的应用程序

关于javascript - 无法将 Bootstrap 4、jQuery 和 PopperJS 库添加到 .angular-cli.json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48633945/

相关文章:

javascript - 如何通过 jquery 更改 FullCalendar 中的第一天属性

javascript - ES5 和 ES6 中的 Angular 2 依赖注入(inject)

Angular 9 未处理的 promise 拒绝 : Angular JIT compilation failed error

javascript - 如何检测 IE8 并显示页面或警报

javascript - 使用WebStorm测试Angular JS : unresolved function or method inject()

javascript - 防止关闭剑道上下文菜单中的子菜单,直到用户将鼠标悬停在另一个菜单项上或单击外部/另一个菜单项

javascript - 我如何在类里面使用 jquery slide toggle?

angular - 从 Angular 4 中的 API 获取数据

javascript - Firebase 自定义声明允许使用哪些数据类型?

javascript - 如何在 JavaScript 中进行 while 循环倒计时秒数。 (初学者)