Angular项目配置angular.json无法访问node_modules中Bootstrap的问题

首先，核心问题是你在angular.json的配置里拼写错误：把bootstrap写成了boostrap（缺少字母t），这是导致路径无法被识别的关键原因。

正确的操作步骤与配置 #

1. 确保完整安装依赖（Bootstrap 4及以上需要popper.js支持弹窗、下拉等组件，建议一并安装）：

npm install --save bootstrap jquery popper.js

2. 修改angular.json中的配置，修正拼写错误，并使用正确路径（angular.json位于项目根目录，直接引用同级的node_modules即可，无需../前缀）：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],
"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"
]

3. 重启Angular开发服务器：修改angular.json后必须重启ng serve，配置才会生效，这是容易忽略的细节。

为什么@import能生效？ #

你在style.css中使用的@import "../node_modules/bootstrap/dist/css/bootstrap.css"是正确拼写（bootstrap而非boostrap），所以路径能被正确解析。

额外排查点 #

• 检查项目根目录下的node_modules文件夹，确认bootstrap目录存在；若不存在则重新执行安装命令
• 若使用Angular 12+，可尝试绝对路径格式："../../node_modules/bootstrap/dist/css/bootstrap.css"（不过通常根目录直接引用node_modules即可）

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