本文详解 ng new 创建项目后 assets 文件夹缺失、手动添加后资源 404 的常见问题，明确 assets 目录位置、angular.json 配置层级与路径规范，并提供可验证的配置示例和调试要点。
本文详解 `ng new` 创建项目后 assets 文件夹缺失、手动添加后资源 404 的常见问题，明确 assets 目录位置、`angular.json` 配置层级与路径规范，并提供可验证的配置示例和调试要点。
在使用 ng new my-app 初始化 Angular 项目时，官方行为是默认创建 src/assets/ 目录（含示例 favicon.ico），但部分 Angular CLI 版本（尤其是 v16+ 启用“standalone 默认”或自定义脚手架模板时）可能跳过该目录生成。这并非 bug，而是 CLI 将 assets 视为“按需启用”的静态资源区——只要 angular.json 中声明了有效路径，构建系统便会自动处理；目录本身是否预存在不影响功能，但必须由开发者确保其物理存在且路径准确。
✅ 正确做法：三步到位
1. 创建标准目录结构
确保在 src/ 下手动创建完整路径：
mkdir -p src/assets/images # 示例：放入一张图片 cp /path/to/image1.jpg src/assets/images/
⚠️ 注意：
assets必须位于src/内部（即src/assets/），不可置于项目根目录或src/app/下。
2. 精准配置 angular.json
assets 配置项必须位于 projects.<your-project-name>.architect.build.options.assets</your-project-name> 路径下（v16+ 中 architect 已替代旧版 targets）。典型配置如下（推荐简洁写法）：
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"assets": [
"src/favicon.ico",
"src/assets"
]
}
}
}
}
}
}
- ✅
"src/assets"：表示将src/assets/下所有内容（含子目录）映射到构建输出的/assets/路径； - ❌ 错误示例：
"input": "src/assets/"+"output": "/assets/"是冗余的旧式写法，易因glob匹配规则出错；现代 CLI 推荐直接使用字符串路径。
3. HTML 中引用方式保持简洁
在组件模板中，始终使用相对于应用根路径的 URL（即不加 ./ 或 src/）：
<!-- 正确：浏览器请求 http://localhost:4200/assets/images/image1.jpg --> <img src="assets/images/image1.jpg" alt="logo"><!-- 错误：会尝试请求 http://localhost:4200/src/assets/...（404） --><img src="src/assets/images/image1.jpg">
? 验证与调试技巧
-
检查构建输出：运行
ng build --configuration development后，打开dist/my-app/目录，确认是否存在assets/子文件夹及对应图片； -
查看启动日志：
ng serve启动时，CLI 会在控制台打印Generating browser application bundles...后明确列出assets处理日志； - 清除缓存重试：有时浏览器缓存导致旧 404 持续出现，可强制刷新（Cmd+Shift+R）或禁用缓存（DevTools → Network → ✅ Disable cache）；
-
版本兼容提示：Angular v17+ 对
angular.jsonschema 更严格，若配置层级错误（如把assets放在test或serve配置块下），CLI 会直接报错退出，此时请严格对照 Angular 官方 Schema 文档 核对路径。
? 总结
ng new 不创建 assets 文件夹 ≠ 功能缺失，而是遵循“显式优于隐式”原则。只要确保：
① src/assets/ 物理目录存在且结构合理；
② angular.json 中 assets 数组精准置于 build.options 下，使用字符串路径（非对象）；
③ 模板中 src 属性以 /assets/... 形式书写（无前缀）；
即可零配置实现静态资源正常加载。这是 Angular CLI 保障工作区一致性与构建可靠性的关键实践。
