Dropdown Bootstrap 4 doesn't work in production of angular's application

Question

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> 

Manfred

Answer 1

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 [email protected]

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>

Kelter

this worked for my case. I downgraded the version to 4.3.1 – Optical

You may not downgrade any more. Fixed in 4.5.0 (github.com/twbs/bootstrap/pull/30383) – Coltoncoltsfoot

Answer 2

We have the same issue at the moment, but only with IE11.

Update 1: As of right now I can tell you, that it hast something to do with the angular / typescript version. I reverted our app from 8.2.14 / 3.5.3 back to 8.0.0 / 3.4.3 and it starts working again. Now we will go up the different version to find out, what version change cases the problem.

Update 2: After testing multiple combinations of angular versions, we found out that these two packages caused our problem:

"@angular-devkit/build-angular"

"@angular/cli"

A newly created angular 8 project uses the follwing versions:

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

"@angular/cli": "~8.3.20"

But with 8.3.x it´s not working! Reverting these two packages to the latest 8.2.x version fixes our problem!

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

"@angular/cli": "8.2.2"

Tafia

This didn't work for me either. There is an opened issue about this in Github, but is currently closed waiting for a repro. github.com/twbs/bootstrap/issues/29996 – Tula

Did anybody get something on this? I can't easily revert my versions due to other dependencies; I get the problem in electron but I'm not sure how easy it would be to make a reduced test case as there are a hell of a lot of dependencies! – Unciform

Answer 3

I had this issue too and fixed by replacing 2 occurrences of "popperConfig: (null|object)" for "popperConfig: {}" on bootstrap-4.4.1.js

Specter