如何在Angular 6项目中引入Bootstrap？配置时遇模块未找到问题

DevOps 小满

2026-5-27

解决Angular中Bootstrap样式模块未找到的问题

嘿，我来帮你搞定这个Bootstrap加载失败的问题！从你描述的情况（在angular.json里添加了Bootstrap样式依赖却提示模块未找到）和提供的文件截图来看，咱们可以从这几个关键点入手排查：

第一步：确认Bootstrap是否已正确安装
模块未找到最常见的原因就是依赖包没装好。打开项目根目录的终端，执行安装命令：
```
npm install bootstrap --save
```
如果需要和你的Angular版本匹配的特定Bootstrap版本，比如Angular 12+适配Bootstrap 5.x，可指定版本号安装：
```
npm install bootstrap@5.3.0 --save
```
第二步：检查angular.json中的样式路径是否正确
打开angular.json找到styles数组，确保Bootstrap的CSS文件路径准确无误。正确的路径应该指向node_modules里的Bootstrap文件，示例如下：
```
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]
```
留意不要写错层级（比如漏写dist或css目录），路径错误直接会导致模块找不到。
第三步：重启Angular开发服务器
修改angular.json后，Angular的热重载不会自动生效，必须重启开发服务。先按Ctrl+C停止当前服务，再重新执行：
```
ng serve
```
第四步：避免重复引入样式
看你的index.html截图，如果里面手动添加了Bootstrap的<link>标签，建议先注释掉。如果angular.json已经配置了样式引入，手动重复添加不仅可能冲突，还会干扰问题排查。
第五步：检查版本兼容性
确保Bootstrap和Angular版本匹配：
- Angular 12+ 推荐使用Bootstrap 5.x
- Angular 8-11 适配Bootstrap 4.x
  版本不兼容也可能引发加载异常。