Dropdown Bootstrap 4 在 Angular 应用程序的生产中不起作用答案

【问题标题】：Dropdown Bootstrap 4 doesn't work in production of angular's applicationDropdown Bootstrap 4 在 Angular 应用程序的生产中不起作用
【发布时间】：2020-04-24 23:17:53
【问题描述】：

我在我的 Angular 应用程序中使用 bootstrap 4，下拉功能在开发人员模式下运行良好，但在生产模式下，我收到此错误：

未捕获的错误：DROPDOWN：选项“popperConfig”提供类型“window” 但预期类型“(null|object)”。
在 Object.typeCheckConfig (vendors.e5434761d9d5f5d91054.bundle.js:1)
在 e.t._getConfig (vendors.e5434761d9d5f5d91054.bundle.js:1)
在新 e (vendors.e5434761d9d5f5d91054.bundle.js:1)
在 HTMLButtonElement。 (vendors.e5434761d9d5f5d91054.bundle.js:1)

这是我在我的应用程序中使用的代码

<div class="dropdown">

  <button class="btn btn-secondary dropdown-toggle" type="button" 
    id="dropdown-search" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false">

    Fiches consultées
  </button>

  <div class="dropdown-menu dropdown-filter filter-menu" 
    aria-labelledby="dropdown-search">

    <div *ngFor="let h of historiques" class="form-check">

      <input class="form-check-input" id="{{h.name}}" type="checkbox"
        value="{{h.name}}" [(ngModel)]="h.selected" 
        (change)="getSelected()">

      <label class="form-check-label" for="{{h.name}}">
        {{h.code}}
      </label>
    </div>
  </div>
</div>

【问题讨论】：

标签： html angular bootstrap-4 angular8

【解决方案1】：

问题在于 bootstrap 4.4+ 版本，更改为 bootstrap 4.3.1 即可正常工作。

您可以从 npm 安装它，然后将路径添加到 angular.json 文件中（样式和脚本配置）：

npm install bootstrap@4.3.1

或在 index.html 中使用网址

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

【讨论】：

这适用于我的情况。我将版本降级到 4.3.1
您不能再降级了。已在 4.5.0 (github.com/twbs/bootstrap/pull/30383) 中修复

【解决方案2】：

目前我们也有同样的问题，但仅限于 IE11。

更新 1：截至目前，我可以告诉你，它与 angular / typescript 版本有关。我将我们的应用程序从 8.2.14 / 3.5.3 恢复到 8.0.0 / 3.4.3，它又开始工作了。现在我们将上不同的版本来找出问题所在。

更新 2：在测试了多个角度版本的组合后，我们发现这两个包导致了我们的问题：

“@angular-devkit/build-angular”

“@angular/cli”

一个新创建的 Angular 8 项目使用以下版本：

"@angular-devkit/build-angular": "~0.803.20"

"@angular/cli": "~8.3.20"

但是在 8.3.x 中它不起作用！将这两个包恢复到最新的 8.2.x 版本解决了我们的问题！

"@angular-devkit/build-angular": "0.802.2"

"@angular/cli": "8.2.2"

【讨论】：

这对我也不起作用。 Github 中有一个未解决的问题，但目前已关闭等待重现。 github.com/twbs/bootstrap/issues/29996
有人对此有所了解吗？由于其他依赖项，我无法轻松恢复我的版本；我在电子中遇到了问题，但我不确定减少测试用例有多容易，因为存在大量依赖项！

【解决方案3】：

我也遇到了这个问题，并通过在 bootstrap-4.4.1.js 上将 2 次出现的“popperConfig: (null|object)”替换为“popperConfig: {}”来解决

【讨论】：