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

對於角 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 版本時，也是同樣的問題。 由於解決方案可以使用 bootstrap bundle 縮小的 js 文件而不是 bootstrap.min.js。 Bootstrap 包已經包含 popper.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

形成 Angular 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

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

Answer 6

新的https://www.npmjs.com/package/@popperjs/core不適用於 bootstrap 5。

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

在 Angular 13 中嘗試過，它不起作用，所以必須退回。