Dropdown Bootstrap 4 не работает при создании приложения angular - PullRequest
Новая
       14

Dropdown Bootstrap 4 не работает при создании приложения angular

4 голосов
/ 07 января 2020

Я использую bootstrap 4 в моем приложении angular, функция раскрытия работает отлично в режиме разработчика, но в производственном режиме я получил эту ошибку:

Uncaught Error: DROPDOWN: Опция "popperConfig" предоставила тип "window", но ожидаемый тип "(null | object)".
в Object.typeCheckConfig (vendors.e5434761d9d5f5d91054.bundle. js: 1)
в et_getConfig (vendors.e5434761d9d5f55). 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>

Ответы [ 2 ]

7 голосов
/ 07 января 2020

Проблема с версией bootstrap 4.4+, измените на bootstrap 4.3.1 и будет работать нормально.

Вы можете установить ее с npm, а затем добавить путь в angular . json file (конфиги стилей и скриптов): 

npm install bootstrap@4.3.1

или используйте URL в вашем индексе. 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>
1 голос
/ 07 января 2020

У нас сейчас такая же проблема, но только с IE11.

Обновление 1: На данный момент я могу сказать вам, что это имеет отношение к версии angular / typcript. Я вернул наше приложение с 8.2.14 / 3.5.3 обратно на 8.0.0 / 3.4.3, и оно снова начинает работать. Теперь мы go создадим другую версию, чтобы выяснить, какая смена версии вызывает проблему.

Обновление 2: после тестирования нескольких комбинаций версий angular мы обнаружили, что эти два пакета вызвали нашу проблему :

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

...