Angular 4 Bootstrap dropdown vereist Popper.js

Ik heb een nieuwe Angular 4 CLI-app. Nadat je dit hebt uitgevoerd:

npm install [email protected] jquery popper.js --save

en .angular-cli.json als volgt bewerken:

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

Ik heb nog steeds een probleem in de 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)

Hoe los ik dit op?

Antwoord 1, autoriteit 100%

Voeg popper.jstoe vóór 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"
],

Antwoord 2, autoriteit 15%

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

Antwoord 3, autoriteit 10%

Deed hetzelfde probleem toen ik de app update naar versie 8 van Angular. Als oplossing kan bootstrap-bundel geminimaliseerd js-bestand in plaats daarvan bootstrap.min.js gebruiken. Bootstrap-bundel bevatte al popper.js. Moet angular.json repareren (scriptsarray in buildsectie), zal er uiteindelijk ongeveer zo uitzien:

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

Voor deze oplossing is popper.jsniet nodig in het project. Kan deze module verwijderen:

npm uninstall popper.js

voor het geval dat jQuery nodig is 🙂

Hoop, help je

Antwoord 4, autoriteit 5%

Vorm Angular 8 tot 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"
    ],