Angular 18 中 public 文件夹的资产引用

问题背景

Angular 18 引入了全新的项目结构，使用 public 文件夹替代了之前版本中的 assets 文件夹来存放静态资源（如图片、字体等）。当你使用 Angular CLI 18+ 创建工作区和应用程序时，典型结构如下：

workspace-name
│
└── projects
    │
    └── application-name
        ├── public   // 新的资产文件夹位置
        └── src

许多开发者在使用此新结构时遇到了两个核心问题：

1. 不知道如何正确引用 public 文件夹中的资产
2. 发现构建时资产未被复制到输出目录（dist），导致引用失效

解决方案

基本引用方法（推荐）

在 angular.json 使用默认配置的前提下（无需修改），直接使用相对于 public 根目录的路径：

// angular.json (默认配置)
"assets": [
  {
    "glob": "**/*",
    "input": "public"  // 默认配置指向 public 文件夹
  }
]

项目结构与引用示例

public/
├── img/
│   └── logo.png
├── fonts/
│   └── Inter.woff2
└── favicon.ico

<!-- 模板中引用示例 -->
<img src="img/logo.png" alt="公司Logo">

<!-- 字体引用（CSS中） -->
<style>
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter.woff2') format('woff2');
}
</style>

关键原则

• 路径中不需要包含 public/ 前缀
• 所有路径始终相对于 public 文件夹根目录
• 构建时内容会被复制到 dist 根目录

替代引用模式

方案 A：在 public 下创建 assets 子目录

许多开发者习惯保留 Angular 17 的 assets/ 路径风格：

public/
└── assets/
    └── images/
        └── product.jpg

<!-- 引用方式 -->
<img src="assets/images/product.jpg">

方案 B：使用根路径引用（适用于自定义目录结构）

当需要使用绝对路径时（建议在特殊场景使用）：

<img src="/img/logo.png">  <!-- 以斜杠开头的路径 -->

注意

根路径方式在某些路由场景或服务端渲染中可能出问题，大多数情况下应优先使用相对路径

方案 C：在 angular.json 中添加额外路径

如果你需要同时保留 public 和传统的 assets/src 结构：

// angular.json
"assets": [
  {
    "glob": "**/*",
    "input": "public"
  },
  {  // 额外添加传统 assets 路径
    "glob": "**/*",
    "input": "src/assets",
    "output": "/assets/"
  }
]

<!-- 传统路径引用方式 -->
<img src="assets/legacy-image.png">

疑难问题解决

构建时资产未被复制

如果发现 public 中的文件未被复制到 dist，检查以下配置：

// angular.json (多工作区修正方案)
"assets": [
  {
    "glob": "**/*",
    "input": "projects/your-app-name/public"
  }
]

常见错误

若路径配置错误，浏览器控制台会报 404 错误：
GET http://localhost:4200/img/logo.png 404 (Not Found)

CSS 中引用字体文件

使用 ^ 前缀确保路径从根目录解析（无论 CSS 文件位置）：

/* src/styles.css */
@font-face {
  font-family: 'Inter';
  src: url('^public/fonts/Inter.woff2') format('woff2');
}

多项目工作区（Monorepo）特殊处理

对独立项目（非工作区模式）可直接使用：

<img src="logo.png"> <!-- 直接引用 public/logo.png -->

但在工作区项目中，推荐明确使用子路径：

<img src="images/logo.png"> <!-- public/images/logo.png -->

配置原理解析

angular.json 配置详解

{
  "glob": "**/*",      // 匹配所有文件
  "input": "public",   // 源目录（相对于项目根目录）
  "output": ""         // 输出目录（默认空表示 dist 根目录）
}

高级配置选项示例

// 仅复制 JPG 文件到指定目录
{
  "glob": "**/*.jpg",
  "input": "public",
  "output": "images/"
}

构建过程详解

总结

1. 资源放置：所有静态资产（图片、字体、JSON等）都放在应用目录下的 public 文件夹中
2. 默认引用：直接使用相对于 public 根目录的路径（无需 public/ 前缀）
3. 路径映射：public/img/logo.png → 模板中引用为 img/logo.png
4. 多路径支持：可在 angular.json 中添加多个资源路径配置
5. CSS 注意事项：使用 ^ 前缀解决字体路径问题

遵循这些规则，即可在 Angular 18+ 项目中无缝管理各种静态资源，同时保持代码清晰和路径一致性。