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 [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>
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"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With