Bootstrap4 dependency on PopperJs causes an error on Angular

Question

I just created a new angular-cli project
and ran npm install bootstrap@4.0.0-beta jquery popper.js --save
and changed the .angular-cli.json related parts as below

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

however I get an error below

 10:2287 Uncaught SyntaxError: Unexpected token export at eval (<anonymous>) at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9) at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1) at __webpack_require__ (bootstrap 4403042439558687cdd6:54) at Object.2 (scripts.bundle.js:66) at __webpack_require__ (bootstrap 4403042439558687cdd6:54) at webpackJsonpCallback (bootstrap 4403042439558687cdd6:25) at scripts.bundle.js:1 

Any ideas how to fix this?

Answer 1

By looking at the documents at https://getbootstrap.com/docs/4.2/getting-started/introduction/#js , you will see that they import the following:

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

Pay attention to the name: jquery. slim .min.js, umd /popper.min.js!

So I used the following in .angular-cli.json :

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

After that, it seems to be working now.

Answer 2

I had the same problem. My solution was not to import the dist folder (./ node_modules / popper.js / dist / popper.js), but rather the umd folder (./node_modules/popper.js/dist/ umd /popper.js). It doesn't matter if you get a mini or normal version of a js file.

Answer 3

I see that many people are struggling to add and properly enable Bootstrap 4 dependencies (jQuery, popper.js, etc.). But there is a much easier solution in the form of https://ng-bootstrap.imtqy.com .

ng-bootstrap provides native Angular directives written from scratch. The positive consequence is that: * you do not need to include and worry about jQuery, popper.js, etc. * directives provide APIs that "make sense" in the Angular world

For anyone trying to use Bootstrap 4.beta with Angular - ng-bootstrap has just released its first beta, which is fully compatible with Bootstrap 4.beta CSS

Answer 4

I have the same problem and sucks ... but if you import directly to index.html in the head tag, for example, bootrstrap say's and not with npm ... you will get good results. that don't throw problems ... but this is just a patch. But if the user does not have the Internet, this is another story.

Answer 5

If you work in Asp.net Mvc UMD also do the thing.

As in https://stackoverflow.com/a/3609168/1672178/ ... just add to BundleConfig.cs:

 bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/umd/popper.js")); 

Besides:

 bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/popper.js")); 

Answer 6

To start modal mode, change the target from "es2015" to "es5" in tsconfig.ts

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