Angular环境下Bootstrap 5的Navbar-Toggle失效 报Popper.js语法错误

1. 修复Popper.js语法错误 #

你当前的Unexpected token 'export'错误由错误的Popper依赖版本和重复加载导致，按以下步骤修正：

• 先卸载旧版废弃的popper.js，安装Bootstrap 5要求的依赖：

  npm uninstall popper.js
  npm install @popperjs/core
  

• 修正angular.json中的scripts配置，删除冗余的jQuery、旧版Popper引入，同时删除你在HTML中额外添加的Popper、Bootstrap CDN脚本，避免重复加载冲突：

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

  注：Bootstrap 5已不再依赖jQuery，无需引入相关文件。

2. 修复导航栏切换属性错误 #

Bootstrap 5对触发交互的自定义属性新增了bs-命名空间，你当前使用的是Bootstrap 4的旧属性，直接替换navbar toggler按钮的对应属性即可：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

仅需将原data-toggle修改为data-bs-toggle、data-target修改为data-bs-target。

3. 生效验证 #

修改完成后重启开发服务ng serve，清空浏览器缓存后即可正常使用导航栏切换功能。

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