Angular 16中Bootstrap无法生效问题求助

已按照要求配置了angular.json中的styles和scripts，但Bootstrap样式及组件仍无法正常工作。

当前配置 #

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

测试代码（未生效） #

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Page 1</a>
            </li>
            <li>
                <a href="#">Page 2</a>
            </li>
            <li>
                <a href="#">Page 3</a>
            </li>
        </ul>
    </div>
</nav>

问题原因及解决办法 #

1. 版本不匹配：HTML类与Bootstrap版本不一致 #

你写的HTML用的是Bootstrap 3的类名（如navbar-default、navbar-header），但如果安装的是Bootstrap 5，这些类已被废弃，自然不会生效。

解决：

• 若坚持用Bootstrap 3，执行命令安装对应版本：

  npm install bootstrap@3 --save
  

• 推荐升级到Bootstrap 5，使用新版类名，修正后的导航栏代码如下：

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">WebSiteName</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <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="#">Page 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Page 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Page 3</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  

2. Script加载顺序错误 #

Bootstrap的JS组件依赖Popper，必须先加载Popper再加载Bootstrap JS，你当前的顺序搞反了。此外，Bootstrap 5已不再强制依赖jQuery，且推荐使用官方的@popperjs/core而非旧版popper.js。

修正后的angular.json配置（Bootstrap 5）：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
],
"scripts": [
  // 若无需jQuery可直接删除这一行
  // "node_modules/jquery/dist/jquery.min.js",
  "node_modules/@popperjs/core/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

更简便的方式是使用bootstrap.bundle.min.js，它已内置Popper，无需单独导入：

"scripts": [
  // "node_modules/jquery/dist/jquery.min.js", // 可选
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

3. 确保依赖安装正确 #

如果用Bootstrap 5，需安装正确的Popper依赖：

npm install bootstrap @popperjs/core --save

4. 全局样式直接导入（备选方案） #

若angular.json配置不生效，可直接在src/styles.scss中导入Bootstrap样式：

@import "bootstrap/dist/css/bootstrap.min.css";

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