Angular中Bootstrap默认NavBar下拉菜单失效问题求助

你的问题出在只引入了Bootstrap的CSS，缺少实现交互功能必需的JavaScript依赖。Bootstrap 5的下拉组件依赖Popper.js处理定位逻辑，同时需要Bootstrap自身的JS文件来触发下拉展开/收起的交互。

以下是具体解决步骤：

• 安装必要依赖
  在项目根目录执行命令：

  npm install bootstrap @popperjs/core
  

• 配置Angular项目资源
  打开angular.json，找到architect > build > options下的styles和scripts数组，添加对应资源路径：

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

• 重启开发服务器
  停止当前Angular服务，重新执行ng serve，下拉菜单即可正常触发交互。

如果不想通过npm管理依赖，也可以直接在index.html中引入CDN资源：

<!-- 页面头部引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 页面底部引入Popper和Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

内容的提问来源于stack exchange，提问作者Ketan Bhavsar