Couldn't add Bootstrap 4, jQuery, and PopperJS libraries to .angular-cli.json
Question
Currently i'm trying to implement Bootstrap 4 navbar element on my Angular 5 project, and it needs three JS libraries, Bootstrap 4, jQuery, and PopperJS.
It works flawlessly (ie NO ERROR occurred) when I add following to 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>
However, I wanted to do an experiment by adding those three JS libraries to the .angular-cli.json (instead of using CDN on src/index.html ), so I did following:
On .angular-cli.json , i add:
"scripts": [
"../node_modules/jquery/dist/jquery.slim.min.js",
"../node_modules/popper.js/dist/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Note: before adding those three scripts to .angular-cli.json I already installed Bootstrap 4, jQuery and PopperJS packages using npm .
When running it, there is an Error on console (Chrome Dev Tool)
Uncaught SyntaxError: Unexpected token export scripts.bundle.js:2302
When clicking on the error message it brought to this line
export default Popper;
I'm kinda confused on what's happening and what's the real cause of the problem? How to fix this error?
1 answers
solution1
2 ACCPTED 2018-03-02 10:40:50
-
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" ],
Now u can launch your app
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.