Angular项目使用Bootstrap5与@types/bootstrap时下拉组件失效问题

架构老林

2026-9-27

问题根因

Bootstrap 5 原生已完全移除对jQuery的依赖，但你安装的@types/bootstrap@5.1.6旧版本仍强制依赖@types/jquery、@types/sizzle类型声明包，同时自动安装的@popperjs/core版本和项目原有下拉组件依赖的Popper版本不兼容，二者共同导致下拉功能触发冲突失效。

解决方案

方案一：升级无jQuery依赖的类型声明版本
先卸载现有冲突依赖，再安装新版@types/bootstrap（v5.2.0及以上版本已移除jQuery相关强制依赖）：
```
npm uninstall @types/bootstrap @types/jquery @types/sizzle
npm install @types/bootstrap@latest --save-dev
```
安装完成后删除项目根目录的node_modules文件夹和package-lock.json文件，重新执行npm install完成依赖拉取即可解决冲突。

方案二：手动声明Toast类型移除额外依赖
如果你仅需要解决Toast组件的TypeScript类型报错，不需要全量Bootstrap类型支持，可完全移除@types/bootstrap依赖，在项目中新增自定义类型声明文件（如src/typings.d.ts），手动补充Toast类型：

declare module 'bootstrap' {
  export class Toast {
    constructor(element: HTMLElement, config?: Partial<{
      animation: boolean;
      autohide: boolean;
      delay: number;
    }>);
    show(): void;
    hide(): void;
    dispose(): void;
    static getInstance(element: HTMLElement): Toast;
  }
}