Dropdown Bootstrap 4 在 angular 应用程序的生产中不起作用 [英] Dropdown Bootstrap 4 doesn't work in production of angular's application

问题描述

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

<块引用>

未捕获的错误:DROPDOWN:选项popperConfig"提供了类型window"但预期类型为(空|对象)".
在 Object.typeCheckConfig (vendors.e5434761d9d5f5d91054.bundle.js:1)
在 e.t._getConfig (vendors.e5434761d9d5f5d91054.bundle.js:1)
在新电子 (vendors.e5434761d9d5f5d91054.bundle.js:1)
在 HTMLButtonElement.(vendors.e5434761d9d5f5d91054.bundle.js:1)

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

<button class="btn btn-secondary dropdown-toggle" type="button"id="dropdown-search" data-toggle="dropdown"aria-haspopup="true" aria-expanded="false">咨询顾问<div class="dropdown-menu dropdown-filter filter-menu"aria-labelledby="下拉搜索"><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"(更改)="getSelected()"><label class="form-check-label" for="{{h.name}}">{{h.code}}

解决方案

问题出在 bootstrap 4.4+ 版本，改用 bootstrap 4.3.1 就可以了.

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

npm install bootstrap@4.3.1

或在 index.html 中使用 url

<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>

I am using bootstrap 4 in my angular application, the dropdown function is working perfectly in mode developer but in production mode, I got this error:

Uncaught Error: DROPDOWN: Option "popperConfig" provided type "window" but expected type "(null|object)".
at Object.typeCheckConfig (vendors.e5434761d9d5f5d91054.bundle.js:1)
at e.t._getConfig (vendors.e5434761d9d5f5d91054.bundle.js:1)
at new e (vendors.e5434761d9d5f5d91054.bundle.js:1)
at HTMLButtonElement. (vendors.e5434761d9d5f5d91054.bundle.js:1)

and this is the code that i'am using in my application

<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> 

解决方案

The problem is with bootstrap 4.4+ version, change to bootstrap 4.3.1 and will works fine.

You can install it from npm and then add the path into angular.json file (styles and scripts configs):

npm install bootstrap@4.3.1

or use urls in your 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>

这篇关于Dropdown Bootstrap 4 在 angular 应用程序的生产中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！