Angular 4 Bootstrap dropdown require Popper.js

Question

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

npm install bootstrap@4.0.0-beta 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 https://ng-bootstrap.github.io .... — pkozlowski.opensource, Aug 14 '17 at 18:22

score 139 · Accepted Answer · edited Dec 27 '19 at 05:08

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 '19 at 05:08

Onome Sotu

666
9
18

answered Aug 14 '17 at 18:35

Joshua Colvin

1,481
1
10
7

21

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. – Developer Wonk Aug 22 '17 at 15:40
What about `declare const $: any;` - is here any way to avoid this and have a result? – Sergey Sep 18 '17 at 20:42
@DeveloperWonk How do you know that the popper.js in "umd" folder is the correct one? – sanjihan Sep 19 '17 at 09:48
@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; – Sergey Sep 19 '17 at 17:30
i'm a bit confused, don't you need to install typings for jquery/popper/bootstrap? – Cristian Sepulveda Sep 21 '17 at 15:18
2

Is there any reason to include the *.min.js version of the files? Won't Webpack minify the files when bundling them anyway? – Moulde Nov 01 '17 at 16:29
This solved a problem I was having with Bootstrap 4.2.1 dropdown, where the menu items were not being shown. Installing popper and jquery, then including these script dependencies worked for me. – Andrew Fielden Feb 10 '19 at 14:33
Please add a semicolon at the end of the second line – Farzan Najipour Aug 10 '19 at 09:37
Works perfectly on Angular 8 – C Alonso C Ortega Jan 15 '20 at 18:23

score 20 · Answer 2 · answered Mar 15 '19 at 22:25

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

score 15 · Answer 3 · answered Jul 09 '19 at 11:28

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 09 '19 at 11:28

Denis Anisimov

685
7
11

If I do this with Angular 8 I get an error "can't resolve popper.js" – Axelle Jul 19 '19 at 15:34
It works for me. As I see at https://getbootstrap.com/docs/4.0/getting-started/contents/#js-files popper.js included in bundle – Denis Anisimov Jul 22 '19 at 12:50
It works for me as well, I confirm. You can use jquery.slim.min.js, it works! – Nicole Naumann Jul 28 '19 at 13:29
Only this worked for me. Installing and including `popper.min.js` before or after `bootstrap.min.js` didn't seem to work. – Nikhil Nanjappa Nov 21 '19 at 17:02
Thanks Denis Anisimov, it works for me =D – Paladice Jan 05 '21 at 09:52

Mustafa Omran · Answer 4 · 2021-11-28T09:17:37.090

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 '21 at 09:17

answered Nov 15 '19 at 09:38

Mustafa Omran

354
5
7

score 0 · Answer 5 · edited Jun 01 '22 at 07:07

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 01 '22 at 07:07

about14sheep

1,813
1
11
18

answered May 26 '22 at 02:50

Sourav Ahmed

26
4

score 0 · Answer 6 · answered Aug 25 '23 at 17:27

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

Angular 4 Bootstrap dropdown require Popper.js

6 Answers6

Linked