web-dev-qa-db-fra.com

Angular 4 Bootstrap le menu déroulant nécessite Popper.js

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

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

et éditer .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), <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)

Comment puis-je réparer ça?

javascriptangularangular-clibootstrap-4
44
mikebrsv

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

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

Était le même problème, lorsque j'ai mis à jour l'application à 8 version de Angular. En tant que solution, vous pouvez utiliser bootstrap bundle et le fichier js minified à la place de bootstrap.min.js. Bootstrap bundle déjà inclus popper.js. Besoin de corriger angular.json (scripts tableau dans la section build), en final sera à peu près comme 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. Peut supprimer ce module:

npm uninstall popper.js

juste au cas où, jquery nécessaire :)

J'espère vous aider

1
Denis Anisimov