在工作区中新的 Angular 18“公共”文件夹结构中引用资源的正确方法是什么？

Question

问题

使用新的

@angular/cli@18

包生成工作区后，我无法确定如何引用放置在

/public

文件夹中的图像资源。

这似乎不是

@angular/cli@17

工作区的问题，但他们使用了不同的资产文件夹名称和位置。

---

背景

为了进行比较，v17 在使用

ng new workspace-name --no-create-application

命令时创建了与此类似的结构，然后在该工作区中使用

ng g app application-name

：

workspace-name
 |
 projects
  |
  application-name
   |
   src
    |
    assets
  

然后，您可以从模板中引用资产，如下所示：

<img src="assets/imagename.webp">

但是，在v18中，使用与上面类似的命令时，创建的结构生成如下：

workspace-name
 |
 projects
  |
  application-name
   |
   public
   src

这些资产似乎打算放入公共文件夹中，但我尝试了各种路径排列来引用这些资产，但无济于事。另外，执行 ng build application-name 似乎不会将 public 文件夹中的文件复制到 dist 中，所以可能与此有关。

应该注意的是，当在没有工作区的情况下生成应用程序时，我可以简单地使用

asset-name.webp

来引用资源，而不会出现问题。此外，v18工作区

angular.json

文件具有为应用程序构建选项的

assets

属性自动设置的以下配置：

"assets": [
 {
  "glob": "**/*",
  "input": "public"
 }
]

---

问题

这是新构建器的错误，还是有一种新方法来引用这些资产或现在需要完成一些额外的配置，因为它们位于不同的文件夹中？

---

解决方案

经过一番调查后，看起来 cli 没有正确设置

projects.applicationName.architect.build.assets

文件中的

angular.json

属性。将

input

属性从

public

更改为

projects/applicationName/public

就成功了。现在我可以简单地使用

asset-name.webp

来引用资源。

Answer 1

解决方案

经过一番调查后，看起来

@angular/cli

没有正确设置

projects.applicationName.architect.build.assets

文件中的

angular.json

属性。将

input

属性从

public

更改为

projects/applicationName/public

就成功了。现在我可以简单地使用

asset-name.webp

来引用资源。

我已经在 @angular/cli 存储库上打开了一个关于此问题的

issue

，希望那里有人可以解决这个问题。