Angular 14集成Bootstrap 4.6折叠菜单无法展开问题求助

核心问题分析 #

你的项目存在重复依赖引入、组件模板结构错误、脚本加载顺序混乱三个关键问题，导致Bootstrap的JavaScript功能无法正常初始化。

修复步骤 #

1. 清理angular.json中的重复依赖 #

你同时引入了Bootstrap和jQuery的完整版、压缩版，这会导致冲突。保留最小必要依赖即可，且注意加载顺序：Popper → jQuery → Bootstrap（Bootstrap 4依赖jQuery和Popper）。

修改后的angular.json脚本和样式配置：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
  "src/assets/scss/material-dashboard.scss",
  "src/assets/css/demo.css"
],
"scripts": [
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
  "node_modules/arrive/src/arrive.js",
  "node_modules/moment/moment.js",
  "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
  "node_modules/bootstrap-notify/bootstrap-notify.js",
  "node_modules/chartist/dist/chartist.js"
]

注意：bootstrap.bundle.min.js已经包含Popper，如果你用bundle版就不需要单独引Popper，二选一即可。

2. 修复home_page.component.html的模板结构 #

Angular组件模板不能包含完整的<html>、<head>、<body>标签，这些标签只能出现在根目录的index.html中。组件模板是嵌入到app-root内部的DOM片段，多余的根标签会破坏页面结构，导致Bootstrap无法正确识别DOM元素。

修改后的home_page.component.html：

<header id="index-header">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light">
      <div class="brand-left-side d-flex">
        <div style="margin-top:25px;">
          <p>LOGO</p>
        </div>
      </div>

      <button class="navbar-toggler" type="button" data-toggle="collapse"
        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
        aria-label="Toggle navigation">
        <i class="material-icons">menu</i>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav topnav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#jobs">HOME</a>
          </li>

          <li class="nav-item">
            <a class="nav-link btn btn-style2 text-white" type="button" href="javascript:void(0)"
              (click)="navigateLogin()" data-toggle="modal" data-target="#myModal">LOGIN</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>

所有外部样式和脚本都应该统一在angular.json或index.html中引入，不要在组件模板里重复加载，避免版本冲突和重复请求。

3. 手动初始化Bootstrap组件（可选） #

如果修复后还是无法展开，可在组件的ngAfterViewInit钩子中手动初始化折叠组件，确保DOM渲染完成后再触发Bootstrap的功能：

在home_page.component.ts中添加：

import { Component, AfterViewInit } from '@angular/core';
declare var $: any; // 声明jQuery类型

@Component({
  selector: 'app-home-page',
  templateUrl: './home_page.component.html',
  styleUrls: ['./home_page.component.css']
})
export class HomePageComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 手动初始化折叠菜单
    $('.navbar-collapse').collapse();
    // 绑定切换按钮事件
    $('.navbar-toggler').on('click', function() {
      $('#navbarSupportedContent').toggleClass('show');
    });
  }

  navigateLogin() {
    // 你的登录逻辑
  }
}

4. 检查浏览器控制台错误 #

打开浏览器开发者工具（F12）的Console面板，查看是否有$ is not defined或Popper is not defined这类错误，这说明依赖没有正确加载，需要重新检查angular.json的脚本路径和顺序。

总结 #

1. 避免重复引入相同依赖的不同版本
2. 严格遵循Angular组件模板的结构规范，不要添加根级html/head/body标签
3. 确保脚本加载顺序符合Bootstrap的依赖要求（Popper → jQuery → Bootstrap）
4. 必要时手动初始化Bootstrap组件，确保DOM渲染完成后再执行

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