无法获得通往 /manifest.webmanifest 的路线来工作

Question

我环顾四周，似乎找不到任何真正解决此问题的方法（在此先感谢您的帮助）。

我已经在 Ionic 中建立了一个网站。 它在https://www.fairydustgame.com/上直播

我正在尝试使其成为 PWA。 当我加载网站时，我可以看到它抛出了以下错误；

Manifest: Line: 1, column: 1, Syntax error.

我的清单文件位于 /manifest.webmanifest - 在我的应用程序的 index.html 文件中引用。

如果我在本地运行该站点，则不会出现该错误。 相关 - 如果我通过 localhost 访问 /manifest.webmanifest 我可以加载页面。 但是 - 如果我尝试在线访问同一页面，我会收到路由错误。

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'manifest.webmanifest'

这是我的 app-routing-module.ts

  {
    path: '',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)

  }
];

我知道我在根目录加载 /home 模块，所以我也尝试将清单文件复制到 /home 目录中。 没有骰子。

我目前使用 AWS Amplify 进行托管，使用 Cloudflare 进行缓存，但是 - 使用直接 Amplify URL 访问该站点具有相同的行为。

我已尝试根据此答案包括跨域并添加必要的重定向

我还尝试复制 manifest.webmanifest 以创建 manifest.json 文件 - 如果我这样做并尝试在本地访问 manifest.json - 我会收到相同的路由错误。 我已尝试在 /www 文件夹中手动重复复制，并尝试使用此自动复制解决方案来尝试让 manifest.json 在本地工作，但如果我将 index.html 引用更改为读取 manifest.json 我会收到相同的路由错误和Manifest: Line: 1, column: 1, Syntax error. 正如我使用托管的 manifest.webmanifest 一样。

为了以防万一，我还尝试将 manifest.json 复制到 /home 目录中。 再次 - 没有骰子。

在这一点上，我不知道下一步该去哪里——我不确定我是否只是从根本上误解了路由的工作原理。 尽管即使在那种情况下——对我来说，一条路线在本地工作但在放大时却不能工作对我来说很奇怪。 除非，也许放大无法处理 webmanifest 文件扩展名，但我似乎无法让我的本地实例理解 .json 重命名，所以我不知道如何测试它。

任何帮助将非常感激。

Answer 1

事实证明，我不得不在 AWS Amplify 中重新排序重定向 - 将重定向放在首位，然后开始正常提取清单文件。

Answer 2

这与 Angular、您的应用程序或构建无关。

我对 Vue 也有同样的问题，它是关于代理的。

客户端（浏览器）很可能被 Amplify 重定向到这个扩展“webmanifest”。

查看菜单中“重写和重定向”选项中的重定向，您会很快理解。

类似于： </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+ $)/> 到 /index.html

而这个（默认）-->> /< > TO 404。

因此，您的 manifest.webmanifest 被重定向到 404，在 RULE 中添加扩展以重定向执行 index.html（因为您的应用程序是 SPA），它会正常工作。 对于任何其他被重定向的扩展程序也是如此。

像这样改变：

</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|webmanifest)$)([^.]+$ )/> 到 /index.html