Angular导航栏切换按钮失效，求排查解决办法

你的问题出在Bootstrap的折叠功能依赖jQuery和Popper.js，但当前项目未引入这两个库，导致点击切换按钮时没有触发折叠逻辑。以下是具体修复步骤：

1. 安装依赖 #

执行以下命令安装jQuery和Popper.js：

npm install jquery @popperjs/core

2. 更新angular.json配置 #

在angular.json的scripts数组中，按顺序添加jQuery和Popper.js的文件路径，确保它们在bootstrap.js之前加载：

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

3. 重启服务 #

停止当前的ng serve进程，重新启动：

ng serve

完成以上步骤后，导航栏的切换按钮应该就能正常触发折叠菜单了。

另外，如果你想避免引入jQuery（Angular项目通常不推荐直接使用jQuery），可以考虑使用ng-bootstrap——这是专门为Angular封装的Bootstrap组件库，完全基于Angular实现，不需要依赖jQuery和Popper.js。

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