Angular - 如何为外部资产文件夹配置直通？

Question

背景：
我正在开发的一个项目需要从我们最近从 AngularJs 更新到 Angular 16 的系统中访问照片。最初，我们从虚拟目录提供这些照片，例如

https://myawesomesite/photos/{photonamehere}.jpg

该路径中的照片不仅出现在实际中应用程序中，我们能够将这些 URL 发送到应用程序，这些应用程序提取我们的应用程序管理的数据，并基本上集中与应用程序域相关的所有照片。

问题：
当我们更改为 Angular 16 时，它就停止工作了。当人们尝试直接导航到上面这样的照片 URL 时，只会被弹回我们应用程序的框架，并出现

NG04002

路由错误。

因为这些照片位于我们的 SPA 之外，所以我们需要确保像

./photos/*.*

这样的路线被排除在我们应用程序中的 Angular 路由系统之外。

研究：
我浏览了许多 StackOverflow 问题，例如“这个”，这些问题不可避免地会参考有关“资产配置”的 Angular 官方文档。我认为我需要做的是，在 angular.json 中，在architect/build/options/assets 数组下添加以下块：

{
  glob: "photos/*",
  input: "./photos/",
  output: "./photos/"
}

...但是，文档非常不清楚人们到底需要做什么才能忽略路线的一部分，这意味着

https://myawesomesite/photos/*.*

。此外，文档的措辞方式对我来说根本没有意义；我知道 

glob

属性是相对于

input

而言的特殊的、Angular 特定路径语法，并且

output

是相对于项目输出目录的路径，目前尚不清楚这是如何协同工作的以及如何编写格式正确的

asset

数组条目。更糟糕的是，谷歌搜索这样的例子并没有真正找到任何结果，或者至少我没有搜索正确的术语来获取如何做我想做的事情的结果。虽然我很乐意要求 Angular 团队为试图快速解决问题的人提供更易于阅读的特定文档，但所有这些都引出了我的问题......

问题：

我怎样才能让 Angular 忽略作为虚拟文件夹挂在根 URL 上的静态资源文件夹？我从研究中得出的结论是正确的还是接近正确的，或者是否有一种不同的、更好的方法来做到这一点，而无需将所有内容都转储到 Angular 项目中的某种资产中？

因此，我的问题的解决方案对于我编写的任何代码来说都是外部的。

Answer 1

我不确定操作的确切顺序或起作用的机制，但它似乎是一个外部资源，存在于您的项目中，具有基于绝对 URL 的内容，但它出现在您的虚拟目录中（https://myawesomesite/ photos/myradphoto.jpg) 如果存在的话将会出现。

如果它不存在，那么浏览器或 Angular 本身似乎会尝试使用其路由系统来尝试进行导航。但是，如果 /photos/myradphoto.jpg 不是有效的路线 - 而且很可能不会 - 那么您会收到技术上正确的 NG04002 错误。

因此，如果您的照片没有显示并且 SPA 损坏，则两个关键的调试步骤是：

确保您的照片确实位于您期望的位置

确保您的外部资源虚拟目录配置正确。