Angular 4 Bootstrap dropdown nécessite Popper.js

Question

J'ai une application Angular 4 CLI fraîchement créée. Après avoir exécuté ceci:

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

et avoir modifié .angular-cli.json comme ceci:

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

J'ai toujours un problème dans la Console 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), :6:17548)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :6:23163)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :6:50902)
    at eval ()
    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)

Comment puis-je résoudre cela?

Answer 1

Inclure popper.js avant 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

Pour 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

Même problème lorsque j'ai mis à jour l'application à la version 8 d'Angular. Comme solution, vous pouvez utiliser le fichier js minifié bootstrap bundle à la place de bootstrap.min.js. Le bundle Bootstrap inclut déjà popper.js. Vous devez modifier le fichier angular.json (array scripts dans la section build), cela ressemblera à ceci:

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

Pour cette solution, popper.js n'est pas nécessaire dans le projet. Vous pouvez supprimer ce module:

npm uninstall popper.js

Au cas où, jquery serait nécessaire :)

J'espère que cela vous aide

Answer 4

De Angular 8 à 13

npm installer 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

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