如何解决Angular CLI中的Bootstrap模块找不到报错问题？

看起来你遇到的是Angular项目里Bootstrap CSS文件路径无法解析的问题，我来帮你一步步排查解决：

1. 先确认Bootstrap是否正确安装 #

首先，打开项目根目录的终端，运行以下命令确认Bootstrap已经安装到项目中：

npm list bootstrap

如果显示"empty"或者找不到包，说明没安装，执行下面的命令安装：

npm install bootstrap --save

这个命令会把Bootstrap安装到项目的node_modules目录，并自动添加依赖到package.json里。

2. 检查文件是否真的存在 #

去报错提示的路径C:\Users\NAVEEN.MULAGA\AngularProjects\node_modules\bootstrap\dist\css\下查看，是否有bootstrap.min.css文件：

• 如果文件不存在，大概率是安装过程出了问题。这时候可以删除node_modules文件夹和package-lock.json文件，然后重新运行npm install来重新安装所有依赖。
• 如果文件存在，那问题就出在路径配置上。

3. 修正angular.json里的styles配置 #

打开项目根目录的angular.json文件，找到build配置下的styles数组。你之前写的../node_modules/...是相对路径，但angular.json本身就在项目根目录，直接用根目录下的node_modules路径即可，不需要加../。

正确的配置应该是这样的：

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

保存文件后，重新运行ng serve，应该就能正常加载Bootstrap的样式了。

4. 替代方案：直接在styles.css中导入 #

如果你觉得配置angular.json麻烦，也可以直接在src/styles.css文件的顶部添加以下代码来导入Bootstrap样式：

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

这里的~符号会告诉Angular CLI去node_modules目录下查找对应的文件，同样能解决路径问题。

最后提醒一下：检查一下拼写有没有错误，比如把bootstrap写成bootstap这种低级错误，也会导致文件找不到哦！

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