Angular 4 Bootstrap dropdown require Popper.js
JavascriptAngularAngular CliBootstrap 4Javascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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"
],
Solution 2 - Javascript
> 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"
],
Solution 3 - Javascript
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
Solution 4 - Javascript
> 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"
],
Solution 5 - Javascript
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.