Angular中Bootstrap导航栏下拉菜单无法加载问题排查

问题详情 #

• 已在angular.json中配置Bootstrap的样式和脚本，代码完全对齐Bootstrap官方示例
• 本地启动项目时，导航栏的下拉菜单无法正常加载展开
• 相同代码在StackBlitz在线编辑器中可正常运行

排查与解决建议 #

• 确认Popper.js依赖：Bootstrap 5的下拉组件依赖Popper.js，本地项目若未安装该依赖会导致功能失效，执行以下命令安装：

  npm install @popperjs/core --save
  

• 验证angular.json配置：确保styles和scripts数组中Bootstrap及Popper的路径正确，示例配置如下：

  "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"
  ]
  

• 清理构建缓存：执行命令清除旧缓存并重启项目，避免缓存导致的资源加载异常：

  ng serve --open --delete-output-path
  

• 检查控制台错误：打开浏览器开发者工具（F12），查看Console面板是否有资源加载失败（如404）或JS报错，Network面板确认Bootstrap和Popper资源是否正常加载。
• 排查样式冲突：检查本地自定义CSS是否覆盖了Bootstrap下拉菜单的核心样式（如display、position、z-index），导致下拉菜单被隐藏或无法触发。

相关导航栏代码 #

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">
      <img src="../../../assets/images/logo.png" style="width: 100px;" alt="logo">
      </a>

    <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>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" routerLink="/">
          <span class="material-icons md-home" title="home" aria-hidden="true"></span>
          Home
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" title="Prod"  routerLink="/art">
          <span class="material-icons md-archive" title="prodotti" aria-hidden="true"></span>
          Prod
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" title="Promo" routerLink="/promo">
          <span class="material-icons md-campaign" title="promozioni" aria-hidden="true"></span>
          Promo
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" title="Fidelity" routerLink="/fidelity">
          <span class="material-icons md-card_membership" title="Fidelity" aria-hidden="true"></span>
          Fidelity
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" title="Ord" routerLink="/ord">
          <span class="material-icons md-local_grocery_store" title="Ordini" aria-hidden="true"></span>
          Ord
          </a>
        </li>
        
      </ul>

      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        
      </form>

      <div class="btn-group" id="ul">
        <button type="button" class="btn btn-default dropdown-toggle thumbnail dduser" data-bs-toggle="dropdown" aria-expanded="false">
          <img class="img-circle" src="/assets/images/user.png" width="38" height="38">
        </button>

        <ul class="dropdown-menu">
          <li><a class="dropdown-item" routerLink="/login">Acc</a></li>
          <li><a class="dropdown-item" href="#">Reg</a></li>
          <li><a class="dropdown-item" href="#">Dis</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" *ngIf="BasicAuth.isLogged()" routerLink="/logout">Logout {{BasicAuth.loggedUser()}}</a></li>
          <li><a class="dropdown-item disabled" *ngIf="!BasicAuth.isLogged()"  href="#">Logout</a></li>
        </ul>
      </div>

    </div>
  </div>
</nav>

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