Angular 4 Bootstrap 下拉菜单需要 Popper.js答案

【问题标题】：Angular 4 Bootstrap dropdown require Popper.jsAngular 4 Bootstrap 下拉菜单需要 Popper.js
【发布时间】：2017-08-14 18:21:10
【问题描述】：

我有一个全新创建的 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)

我该如何解决这个问题？

【问题讨论】：

使用像 ng-bootstrap.github.io 这样的原生 Angular 指令不会有这个问题 ....

标签： javascript angular angular-cli bootstrap-4

【解决方案1】：

在bootstrap.js 之前包含popper.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"
],

【讨论】：

确保在 ./dist/umd 文件夹中添加 popper.min.js 的版本。这个版本 ./dist/popper.min.js 会导致 jquery 出现问题。
declare const $: any; 怎么样 - 这里有什么方法可以避免这种情况并产生结果吗？
@DeveloperWonk 你怎么知道 "umd" 文件夹中的 popper.js 是正确的？
@DeveloperWonk Popper.js 目前有 3 个目标：UMD、ESM 和 ESNext。 UMD - 通用模块定义：AMD、RequireJS 和 globals； ESM - ES Modules：用于支持规范的 webpack/Rollup 或浏览器； ESNext：在 dist/ 中可用，可与 webpack 和 babel-preset-env 一起使用；
是否有任何理由包含 *.min.js 版本的文件？无论如何，Webpack 在捆绑文件时不会缩小文件吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

当我将应用程序更新到 Angular 8 版本时，同样的问题。由于解决方案可以使用 bootstrap bundle 缩小的 js 文件而不是 bootstrap.min.js。 Bootstrap 包已经包含 popper.js。需要修复 angular.json（build 部分中的scripts 数组），最终会是这样的：

"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 执行此操作，我会收到错误“无法解析 popper.js”
它对我有用。正如我在 getbootstrap.com/docs/4.0/getting-started/contents/#js-files popper.js 中看到的那样
我确认它也适用于我。你可以使用jquery.slim.min.js，它可以工作！
只有这对我有用。在bootstrap.min.js 之前或之后安装和包含popper.min.js 似乎不起作用。
感谢 Denis Anisimov，它对我有用 =D

【解决方案4】：

形成 Angular 8 到 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"
    ],

【讨论】：