web-dev-qa-db-ja.com

Angular 4 BootstrapドロップダウンにはPopper.jsが必要です

新しく作成したAngular 4 CLIアプリがあります。これを実行した後：

npm install [email protected] 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 Consoleにまだ問題があります：

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)

どうすれば修正できますか？

javascriptangularangular-clibootstrap-4
44
mikebrsv

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",
],
105
Joshua Colvin

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"
        ],
9
Mustafa Omran

アプリをAngularの8バージョンに更新したときも同じ問題でした。解決策として、bootstrap.min.jsの代わりにbootstrap bundle縮小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が必要です:)

希望、助けて

1
Denis Anisimov