Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 4 Bootstrap dropdown require Popper.js

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?

like image 852
mikebrsv Avatar asked Aug 14 '17 18:08

mikebrsv


People also ask

Does bootstrap need Popper js?

Popper. js is required IF you're using Bootstrap JS. It's not required if you're using only the Bootstrap CSS.

Does bootstrap 5 require Popper?

Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper.


2 Answers

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"
],
like image 136
Joshua Colvin Avatar answered Oct 15 '22 06:10

Joshua Colvin


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"
        ],
like image 22
Mustafa Omran Avatar answered Oct 15 '22 06:10

Mustafa Omran