Angular 19中Bootstrap 5导航栏切换失效问题排查与解决

问题背景 #

已安装Bootstrap ^5.3.7，在angular.json中配置了如下内容，但导航栏切换（navbar toggle）功能无法正常工作，需在不通过index.html引入JS/CSS的前提下解决问题，并明确Angular 19中styles和scripts数组需配置的具体文件。

angular.json当前配置：

"styles": [ 
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

导航栏组件代码（header.component.html）：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</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 active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

解决方案 #

1. Angular 19的标准配置 #

你的angular.json配置本身符合Bootstrap ^5.3.7的要求，以下是明确的配置规则：

• styles数组：需优先引入Bootstrap核心CSS，确保自定义样式可覆盖默认样式：

  "styles": [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
  ]
  

• scripts数组：使用bootstrap.bundle.min.js即可，该文件已集成Bootstrap交互组件依赖的Popper.js，无需额外引入：

  "scripts": [
    "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
  ]
  

2. 修复导航栏切换功能 #

配置正确但功能失效，可按以下步骤排查修复：

（1）重启Angular开发服务器

修改angular.json后必须重启服务，新配置才会生效：

ng serve --open

（2）手动初始化折叠组件

Angular的DOM渲染机制可能导致Bootstrap自动初始化逻辑未触发，可通过组件代码手动绑定：

在header.component.ts中添加代码：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
declare var bootstrap: any;

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements AfterViewInit {
  @ViewChild('navbarToggler') navbarToggler!: ElementRef;

  ngAfterViewInit(): void {
    // 初始化折叠组件
    const collapseElement = document.getElementById('navbarSupportedContent');
    bootstrap.Collapse.getOrCreateInstance(collapseElement, { toggle: false });

    // 绑定按钮切换事件
    this.navbarToggler.nativeElement.addEventListener('click', () => {
      const instance = bootstrap.Collapse.getInstance(collapseElement);
      instance?.toggle();
    });
  }
}

同时给模板中的切换按钮添加模板引用变量：

<button #navbarToggler 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>

（3）验证DOM ID匹配

确认按钮的data-bs-target值与折叠容器的id完全一致，你的代码中#navbarSupportedContent与容器id匹配，此部分无需修改。

验证方法 #

完成操作后，缩小浏览器窗口至移动端尺寸，点击导航栏切换按钮，即可看到折叠菜单正常展开/收起。

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