[英]Angular 4 Bootstrap dropdown require Popper.js
I have a fresh created Angular 4 CLI app.我有一个新创建的 Angular 4 CLI 应用程序。 After running this:
运行后:
npm install bootstrap@4.0.0-beta 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?我该如何解决?
Include popper.js
before bootstrap.js
:在
bootstrap.js
之前包含popper.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"
],
For Angular 7
对于角 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"
],
Was same issue, when I updated app to 8 version of Angular.当我将应用程序更新到 Angular 的 8 版本时,也是同样的问题。 As solution can use bootstrap bundle minified js file instead bootstrap.min.js.
由于解决方案可以使用 bootstrap bundle 缩小的 js 文件而不是 bootstrap.min.js。 Bootstrap bundle included popper.js already.
Bootstrap 包已经包含 popper.js。 Need to fix angular.json (
scripts
array in build
section), in final will be something like this:需要修复 angular.json(
build
部分中的scripts
数组),最终将是这样的:
"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.对于此解决方案,项目中不需要
popper.js
。 Can remove this module:可以删除此模块:
npm uninstall popper.js
just in case, jquery needed :)以防万一,需要jquery :)
Hope, help you希望,帮到你
Form Angular 8 to 13
形成 Angular 8 到 13
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"
],
For Angular 12对于 Angular 12
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"
],
The new https://www.npmjs.com/package/@popperjs/core
doesnt work with bootstrap 5.新的
https://www.npmjs.com/package/@popperjs/core
不适用于 bootstrap 5。
it still requires the old https://www.npmjs.com/package/popper.js?ref=vanillalist
deprecated package.它仍然需要旧的
https://www.npmjs.com/package/popper.js?ref=vanillalist
已弃用包。
tried in angular 13, it doesnt work, so have to fall back.在 Angular 13 中尝试过,它不起作用,所以必须退回。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.