Angular 4 Bootstrap 下拉列表需要 Popper.js

Question

我有一个新创建的 Angular 4 CLI 应用程序。运行此程序后：

npm install bootstrap@4.0.0-beta jquery popper.js --save

并像这样编辑 .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"
],

我在 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)

我该如何解决这个问题？

Answer 1

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

Answer 2

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

Answer 3

当我将应用程序更新到 8 版本的 Angular 时，也是同样的问题。作为解决方案，可以使用引导捆绑缩小的js文件而不是bootstrap.min.js。引导捆绑包已经包括波普尔.js。需要修复 angular.json(build部分中的scripts数组(，最终将是这样的：

"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
],

对于此解决方案，项目中不需要popper.js。可以删除此模块：

npm uninstall popper.js

以防万一，jQuery需要:)

希望，帮助你

Answer 4

形式 角度 8 到 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"
],

Answer 5

新https://www.npmjs.com/package/@popperjs/core不适用于引导程序 5。

它仍然需要旧的https://www.npmjs.com/package/popper.js?ref=vanillalist弃用的包。

在 Angular 13 中尝试过，它不起作用，所以必须退缩。

Answer 6

Angular with Bootstrap 5+ 自此版本以来，jQuery已被删除

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