如何在Angular中本地托管Bootstrap（不使用npm与CDN）

Got it, let's work through why your manually placed Bootstrap isn't loading. Since you've already put the Bootstrap folder in src/ and added the link tag to index.html, the core issue is almost certainly that Angular isn't including your Bootstrap folder as a static asset during the build process. Here's how to fix this step by step:

1. 确认文件结构与链接路径 #

首先，确保你的文件夹结构符合以下格式（这是路径正确的前提）：

src/
├── bootstrap/
│   ├── css/
│   │   ├── bootstrap.min.css
│   │   └── (其他Bootstrap CSS文件)
│   ├── js/
│   │   ├── bootstrap.bundle.min.js
│   │   └── (其他Bootstrap JS文件，若需要)
│   └── (图标/字体文件夹，若Bootstrap包含这些资源)
├── index.html
└── (其他Angular核心文件，比如app/、assets/)

然后更新index.html里的link标签，使用以./开头的相对路径（确保从src/根目录正确解析）：

<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

2. 配置Angular将Bootstrap列为静态资源 #

Angular默认只会打包特定文件夹（比如src/assets和src/favicon.ico）。如果你的bootstrap文件夹没在资源配置列表里，构建或运行开发服务器时，它不会被复制到最终的dist/文件夹。解决方法如下：

• 打开项目根目录下的angular.json文件
• 找到architect > build > options > assets数组（如果需要在测试环境也用Bootstrap，同样更新test下的对应数组）
• 将src/bootstrap文件夹添加到数组中：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/bootstrap" // 添加这一行
]

3. 重启Angular开发服务器 #

angular.json的修改需要重启开发服务器才能生效。如果之前开着ng serve，按Ctrl+C停止它，再重新运行ng serve。

4. 验证修复效果 #

服务器重启后：

• 打开浏览器开发者工具（F12），切换到Network标签
• 刷新页面，在加载的文件列表中查找bootstrap.min.css
• 如果它的状态码是200，说明文件加载成功，Bootstrap样式应该已经生效
• 如果显示404，再检查一遍文件结构和angular.json里的资源配置

可选：添加Bootstrap JavaScript（用于交互组件） #

如果你需要Bootstrap的交互功能（比如模态框、下拉菜单），在index.html的<body>末尾添加以下脚本标签（确认CSS生效后再操作）：

<script src="./bootstrap/js/bootstrap.bundle.min.js"></script>

bootstrap.bundle.min.js已经包含了Popper.js（大多数Bootstrap组件都依赖它），无需额外引入。

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