正常的 Bootstrap 弹出框和 Angular 应用程序在一页中 - 弹出框不起作用

Question

I have a webproject where I server side rendering with a bootstrap theme and jquery. So far everything works fine, except that the dropdown of a nav element is not working anymore. When clicking the dropdown element, the following error is thrown:

Uncaught Error: DROPDOWN: Option "popperConfig" provided type "window" but expected type "(null|object)".  
        at Object.typeCheckConfig (bootstrap.min.js:6)  
        at c.t._getConfig (bootstrap.min.js:6)  
        at new c (bootstrap.min.js:6)  
        at HTMLDivElement.<anonymous> (bootstrap.min.js:6)  
        at Function.each (jquery.min.js:2)  
        at k.fn.init.each (jquery.min.js:2)  
        at k.fn.init.c._jQueryInterface [as dropdown] (bootstrap.min.js:6)  
        at HTMLDivElement.<anonymous> (bootstrap.min.js:6)  
        at HTMLDocument.dispatch (jquery.min.js:2)  
        at HTMLDocument.v.handle (jquery.min.js:2) typeCheckConfig @  bootstrap.min.js:6 t._getConfig @ bootstrap.min.js:6 c @ bootstrap.min.js:6 (anonymous) @ bootstrap.min.js:6 each @ jquery.min.js:2 each @ jquery.min.js:2  c._jQueryInterface @ bootstrap.min.js:6 (anonymous) @ bootstrap.min.js:6 dispatch @ jquery.min.js:2 v.handle @ jquery.min.js:2

This is only happening when the AngularApp is included in the page. Without it works without any issues.

Bootstrap 4, JQuery 3.4.1, Angular 11.2.

Jquery is not included in the angular build but loaded within the page where the angular app is included.

Answer 1

From: https://stackoverflow.com/a/59633070/1772933

Apparently this is a known issue with bootstrap 4.4+ version. If that fits your scenario, try upgrading to 4.5 ( https://github.com/twbs/bootstrap/pull/30383 )