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

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

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

当我将应用程序更新为Angular的8版本时，是同样的问题。作为解决方案，可以使用引导程序包精简的js文件代替bootstrap.min.js。引导程序捆绑包已包含popper.js。需要修复angular.json（scripts节中的build数组），最终将如下所示：

"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

对于Angular 8

npm install bootstrap jquery popper.js --save

{{1}}

Answer 5

对于 Angular 12

<块引用>

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

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

5 个答案: