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

包括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-保存

       "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。Bootstrap 包已经包含 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

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