Для раскрывающегося списка Angular 4 Bootstrap требуется Popper.js

У меня есть свежее созданное приложение 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)

Как это исправить?

Источник

6 ответов

Решение

Включают 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",
],
Источник

Для угловых 7

npm установить загрузчик 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"
        ],
Источник

Была такая же проблема, когда я обновил приложение до версии Angular 8. В качестве решения можно использовать минимизированный файл js пакета начальной загрузки вместо bootstrap.min.js. В комплект начальной загрузки уже включен 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:)

Надеюсь, помогу тебе

Источник

Для Angular 8

npm установить 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"
    ],
Источник

Angular с Bootstrap 5+ Поскольку в этой версии jQuery был удален

npm я загружаю popper.js*

       "styles": [
          "src/styles.scss",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
 "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
          "node_modules/popper.js/dist/umd/popper.min.js"
        ],
Источник

Новый https://www.npmjs.com/package/@popperjs/coreне работает с бутстрапом 5.

он по-прежнему требует старого https://www.npmjs.com/package/popper.js?ref=vanillalist устаревший пакет.

попробовал в angular 13, не работает, поэтому приходится отступать.

Источник
Другие вопросы по тегам