Angular 12 环境下 Bootstrap 5 下拉菜单无法正常生效问题求助

核心故障点 #

• 依赖包不匹配：Bootstrap 5 依赖的是@popperjs/core，而非你安装的旧版popper.js，包名和引用路径全错，下拉菜单依赖Popper做定位，无法加载自然无法触发。
• 冗余依赖冲突：Bootstrap 5 完全不需要jQuery，额外引入反而可能和Angular的DOM管理逻辑产生冲突。
• 配置未生效：修改angular.json后必须重启ng serve开发服务，新配置才会加载。

方案1：修复原生Bootstrap 5 配置 #

• 先卸载错误依赖：

npm uninstall jquery popper.js

• 安装正确的依赖包：

npm install bootstrap @popperjs/core

• 修改angular.json中的scripts配置，移除jQuery相关引用，更新Popper路径：

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "node_modules/@popperjs/core/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

• 重启ng serve服务即可生效。

方案2：使用Angular适配版Bootstrap（更推荐） #

原生Bootstrap JS和Angular的变更检测、动态DOM渲染逻辑容易产生冲突，更推荐使用官方维护的Angular适配组件库@ng-bootstrap/ng-bootstrap，无需依赖jQuery和Popper，兼容性更好：

• 卸载原有Bootstrap相关JS依赖：

npm uninstall jquery popper.js bootstrap

• 安装适配Angular 12的版本：

npm install @ng-bootstrap/ng-bootstrap@10 bootstrap

• 在根模块app.module.ts中导入组件库：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule, ...其他导入],
  ...
})
export class AppModule { }

• 直接使用封装好的下拉组件，无需手动引入Bootstrap JS：

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-secondary" id="dropdownBasic1" ngbDropdownToggle>
    Dropdown button
  </button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button ngbDropdownItem>Action</button>
    <button ngbDropdownItem>Another action</button>
    <button ngbDropdownItem>Something else here</button>
  </div>
</div>

内容的提问来源于stack exchange，提问作者gauthaman vijayan