Javascript Angular 4 Bootstrap 下拉菜单需要 Popper.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45680644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 Bootstrap dropdown require Popper.js
提问by mikebrsv
I have a fresh created Angular 4 CLI app. After running this:
我有一个新创建的 Angular 4 CLI 应用程序。运行后：
npm install [email protected] jquery popper.js --save
and editing .angular-cli.json like this:
并像这样编辑 .angular-cli.json：
"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:
我在 Chrome 控制台中仍有问题：
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?
我该如何解决？
回答by Joshua Colvin
Include popper.jsbefore bootstrap.js:
包括popper.js之前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"
],
回答by Mustafa Omran
For Angular 7
对于 Angular 7
npm install bootstrap jquery popper.js --save
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"
],
回答by Denis Anisimov
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 (scriptsarray in buildsection), in final will be something like this:
是同样的问题，当我将应用程序更新到 Angular 8 版本时。作为解决方案可以使用引导包缩小 js 文件而不是 bootstrap.min.js。Bootstrap 包已经包含 popper.js。需要修复 angular.json （scripts数组中的build部分），最终将是这样的：
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
],
For this solution popper.jsis not needed in project. Can remove this module:
因为popper.js在项目中不需要这个解决方案。可以删除这个模块：
npm uninstall popper.js
just in case, jquery needed :)
以防万一，需要jquery :)
Hope, help you
希望能帮到你
回答by Mustafa Omran
For Angular 8
对于 Angular 8
npm install bootstrap jquery popper.js --save
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"
],
