Angular 18工作区public文件夹资源正确引用方式咨询

数据老陈

2026-6-23

Angular CLI 18工作区中public文件夹资源引用及构建复制问题解决

问题梳理

使用Angular CLI 18创建工作区（ng new workspace-name --no-create-application + ng g app application-name）后，应用目录下新增public文件夹替代了v17版本的src/assets，但出现两个核心问题：

模板中尝试多种路径均无法引用public内的图片资源
执行ng build application-name时，public文件夹的文件未被复制到dist目录
对比无工作区的v18应用，直接用asset-name.webp即可正常引用资源，且工作区的angular.json中assets配置已自动生成：
```
"assets": [
  {
   "glob": "**/*",
   "input": "public"
  }
]
```

解决方案

检查并修正angular.json的assets配置
工作区环境下，assets配置的input路径是相对于应用根目录的，先确认public文件夹确实在application-name目录下（而非工作区根目录）。若配置仍未生效，可显式指定output路径确保资源输出到dist根目录：
```
"assets": [
  {
    "glob": "**/*",
    "input": "public",
    "output": "./"
  }
]
```
调整模板中的资源引用路径
工作区构建完成后，public内的资源会输出到dist应用目录的根目录，因此模板中直接使用资源文件名即可，无需添加public前缀：
```

<img src="imagename.webp">

<img src="/imagename.webp">
```
清理构建缓存后重新构建
缓存可能导致资源未同步，执行以下命令重置构建环境：
```
ng clean
ng build application-name
```
验证是否为Esbuild构建器问题
Angular CLI 18默认使用Esbuild构建器，若上述操作均无效，可临时切换回Webpack构建器测试：
修改angular.json中应用的architect.build.builder字段：
```
"builder": "@angular-devkit/build-angular:browser"
```
重新构建后若恢复正常，说明是Esbuild构建器的bug，可前往Angular官方GitHub仓库提交issue反馈。