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

问题描述 投票:0回答:1

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

当我向src/index.html添加以下内容时,它可以完美地工作(即发生NO ERROR)

<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;

我对发生的事情感到困惑,问题的真正原因是什么?如何解决这个错误?

javascript jquery angular bootstrap-4 popper.js
1个回答
2
投票
  1. npm install --save bootstrap jquery popper.js
  2. 角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" ],

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

© www.soinside.com 2019 - 2024. All rights reserved.