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 (i.e. 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?

Try changing the popper script link to `"../node_modules/popper.js/dist/esm/popper.js"` https://stackoverflow.com/questions/46092871/angular-4-unexpected-token-export — Marian, Feb 06 '18 at 01:15

score 2 · Accepted Answer · answered Mar 02 '18 at 10:40

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

Couldn't add Bootstrap 4, jQuery, and PopperJS libraries to .angular-cli.json

1 Answers1