Angular 4 Bootstrap dropdown require Popper.js

Question

I have a fresh created Angular 4 CLI app. After running this:

npm install [email protected] jquery popper.js --save

and editing .angular-cli.json like this:

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

I still have an issue in Chrome Console:

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:17548)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:23163)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:50902)
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../bootstrap/dist/js/bootstrap.min.js (bootstrap.min.js?f885:1)
    at __webpack_require__ (bootstrap a2f1d85ef068872b0530:54)
    at Object.2 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap a2f1d85ef068872b0530:54)
    at webpackJsonpCallback (bootstrap a2f1d85ef068872b0530:25)

How do I fix this?

You wouldn't have this problem with native Angular directives like ng-bootstrap.github.io .... — pkozlowski.opensource
– pkozlowski.opensource, Commented Aug 14, 2017 at 18:22

Onome Sotu · Accepted Answer · 2019-12-27 05:08:18Z

139

Include popper.js before bootstrap.js:

"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"
],

edited Dec 27, 2019 at 5:08

Onome Sotu

68610 silver badges19 bronze badges

answered Aug 14, 2017 at 18:35

Joshua Colvin

1,4811 gold badge10 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Developer Wonk Over a year ago

Ensure that you add the version of popper.min.js in the ./dist/umd folder. This version ./dist/popper.min.js will cause issues with jquery.

Sergey Over a year ago

What about declare const $: any; - is here any way to avoid this and have a result?

sanjihan Over a year ago

@DeveloperWonk How do you know that the popper.js in "umd" folder is the correct one?

Sergey Over a year ago

@DeveloperWonk Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext. UMD - Universal Module Definition: AMD, RequireJS and globals; ESM - ES Modules: For webpack/Rollup or browser supporting the spec; ESNext: Available in dist/, can be used with webpack and babel-preset-env;

Moulde Over a year ago

Is there any reason to include the *.min.js version of the files? Won't Webpack minify the files when bundling them anyway?

|

Mustafa Omran · Accepted Answer · 2019-03-15 22:25:44Z

20

For Angular 7

npm install bootstrap jquery popper.js --save

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

answered Mar 15, 2019 at 22:25

Mustafa Omran

3545 silver badges7 bronze badges

Comments

Denis Anisimov · Accepted Answer · 2019-07-09 11:28:29Z

15

Was same issue, when I updated app to 8 version of Angular. As solution can use bootstrap bundle minified js file instead bootstrap.min.js. Bootstrap bundle included popper.js already. Need to fix angular.json (scripts array in build section), in final will be something like this:

"scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
],

For this solution popper.js is not needed in project. Can remove this module:

npm uninstall popper.js

just in case, jquery needed :)

Hope, help you

answered Jul 9, 2019 at 11:28

Denis Anisimov

8858 silver badges11 bronze badges

4 Comments

Axelle Over a year ago

If I do this with Angular 8 I get an error "can't resolve popper.js"

Denis Anisimov Over a year ago

It works for me. As I see at getbootstrap.com/docs/4.0/getting-started/contents/#js-files popper.js included in bundle

Nicole Naumann Over a year ago

It works for me as well, I confirm. You can use jquery.slim.min.js, it works!

Nikhil Nanjappa Over a year ago

Only this worked for me. Installing and including popper.min.js before or after bootstrap.min.js didn't seem to work.

Mustafa Omran · Accepted Answer · 2021-11-28 09:17:37Z

7

Form Angular 8 to 13

npm install bootstrap jquery popper.js --save

     "styles": [
      "src/styles.scss",
      "node_modules/bootstrap/dist/css/bootstrap.min.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"
    ],

edited Nov 28, 2021 at 9:17

answered Nov 15, 2019 at 9:38

Mustafa Omran

3545 silver badges7 bronze badges

Comments

about14sheep · Accepted Answer · 2022-06-01 07:07:51Z

0

The new https://www.npmjs.com/package/@popperjs/core doesnt work with bootstrap 5.

it still requires the old https://www.npmjs.com/package/popper.js?ref=vanillalist deprecated package.

tried in angular 13, it doesnt work, so have to fall back.

edited Jun 1, 2022 at 7:07

about14sheep

2,0992 gold badges14 silver badges23 bronze badges

answered May 26, 2022 at 2:50

Sourav Ahmed

264 bronze badges

Comments

Mustafa Omran · Accepted Answer · 2023-08-25 17:27:27Z

0

Angular with Bootstrap 5+ Since this version jQuery has been removed

npm i bootstrap popper.js*

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

answered Aug 25, 2023 at 17:27

Mustafa Omran

3545 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular 4 Bootstrap dropdown require Popper.js

6 Answers 6

9 Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related