如何在ASP.NET Core 6.0 + Angular 14项目中添加Font-Awesome与Bootstrap

一、Bootstrap问题处理 #

你的package.json里已经声明了Bootstrap依赖，但node_modules里找不到，核心原因是没在正确目录执行依赖安装命令：

• 打开终端（优先用VS自带终端或系统终端，别用Package Manager Console），切换到项目内的ClientApp目录：

  cd ClientApp
  

• 执行完整依赖安装：

  npm install
  

  执行完成后，就能在ClientApp/node_modules下找到bootstrap文件夹。

让Angular识别Bootstrap #

安装完成后需要将Bootstrap的样式和脚本全局引入项目，推荐通过angular.json配置：

1. 打开ClientApp/angular.json文件
2. 找到architect > build > options下的styles数组，添加Bootstrap的CSS路径：

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

3. 同样在scripts数组中添加Bootstrap的JS文件（用bundle版本，已包含Popper，无需单独引入popper.js）：

   "scripts": [
     "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
   ]
   

   保存配置后重启Angular开发服务，Bootstrap即可生效。

二、Font Awesome问题处理 #

你之前执行的npm install font-awesome --save没生效，存在两个核心问题：

1. 执行目录错误：在项目根目录执行命令时，依赖会被安装到根目录的node_modules，而非Angular项目的ClientApp/node_modules
2. 包名过时：旧版font-awesome包已停止维护，官方当前推荐使用@fortawesome/fontawesome-free

正确安装步骤 #

1. 切换到ClientApp目录，执行安装命令：

   npm install @fortawesome/fontawesome-free --save
   

2. 在angular.json的styles数组中添加Font Awesome的CSS路径：

   "styles": [
     "src/styles.css",
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
   ]
   

3. 重启开发服务后，即可直接在组件中使用Font Awesome图标，例如：

   <i class="fa-solid fa-house"></i>
   

额外提醒 #

• 若安装后仍找不到依赖，可删除ClientApp/node_modules和ClientApp/package-lock.json文件，重新执行npm install
• 尽量避免用Package Manager Console执行npm命令，容易因目录切换失误导致依赖安装位置错误

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