如何将基础Bootstrap模板正确集成到Angular项目中

问题原因 #

1. Bootstrap版本不匹配：你使用的模板是Bootstrap 4.0版本，直接执行npm install bootstrap默认会安装最新的Bootstrap 5.x大版本，两个版本的类名、样式规则差异极大，是样式不符的核心原因。
2. 缺少JS依赖引入：Bootstrap 4的导航栏折叠、下拉菜单等交互效果，依赖jQuery、Popper.js以及Bootstrap自带的JS脚本，你仅引入了CSS文件，也没有配置对应的JS依赖，所以交互效果完全失效。
3. 缺少模板专属全局样式：该starter模板自带了body上内边距、内容容器专属样式等自定义规则，你没有把这部分样式同步到Angular项目中，也可能存在<app-root>根组件样式和Bootstrap全局规则冲突的问题。
4. 配置未生效：修改angular.json后如果没有重启ng serve服务，新的配置不会加载。

解决步骤 #

• 卸载现有Bootstrap，安装匹配版本的全套依赖：

  npm uninstall bootstrap
  npm install bootstrap@4.0.0 jquery@3.2.1 popper.js@1.12.9
  

• 完善angular.json配置，在已配置的CSS路径同级的scripts数组中，按顺序添加以下JS路径：

  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]
  

• 打开项目全局样式文件src/styles.css，添加模板专属的自定义样式：

  body {
    padding-top: 5rem;
  }
  .starter-template {
    padding: 3rem 1.5rem;
    text-align: center;
  }
  

• 重启Angular开发服务，配置修改后必须重启ng serve才会生效。

如果不想引入jQuery依赖，可以替换使用@ng-bootstrap/ng-bootstrap组件库，这是针对Angular生态封装的Bootstrap组件实现，无需依赖jQuery和Bootstrap原生JS，注意安装时选择和Bootstrap 4匹配的版本即可。

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