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

Posted 2023-05-08

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

【英文标题】：Normal Bootstrap Popover and Angular app in one page - Popover not working

【发布时间】：2021-07-20 22:12:32

【问题描述】：

我有一个 web 项目，我在其中使用引导主题和 jquery 进行服务器端渲染。到目前为止，一切正常，除了导航元素的下拉菜单不再起作用。单击下拉元素时，会抛出以下错误：

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

只有在页面中包含 AngularApp 时才会发生这种情况。没有它可以正常工作。

引导程序 4、JQuery 3.4.1、Angular 11.2。

Jquery 不包含在 Angular 构建中，但会加载到包含 Angular 应用程序的页面中。

【问题讨论】：

bootstrap、jquery 和 angular 有哪些版本？另外，您的角度依赖项中是否也导入了 jquery？

更新信息@JohnTyner

【参考方案1】：

发件人：https://***.com/a/59633070/1772933

显然这是 bootstrap 4.4+ 版本的一个已知问题。如果这适合您的情况，请尝试升级到 4.5 (https://github.com/twbs/bootstrap/pull/30383)

【讨论】：

谢谢，我刚刚更新了我的引导 js 库，它正在工作！