angular - list : Line: 1, 列 : 1, 语法错误。 AWS 错误

Question

我有一个 Angular 8 应用程序，我运行了这个命令来尝试设置 PWA 功能:

$ ng add @angular/pwa --project my-app

从那里开始，文件似乎按照您对 PWA 的预期进行设置，如描述的那样 here .

开发中没有错误。

但是，我现在已经将该应用程序投入生产，通过 AWS Amplify 托管，我相信这种添加 PWA 功能的尝试产生了问题。

一旦浏览器加载生产应用程序，它就会“卡在”该应用程序版本上。因此，例如，我的 chrome 浏览器仍然加载了几天前该应用程序的第一个版本，即使我已经多次更新该应用程序。这也发生在移动 safari 等其他浏览器上。

当它加载那个旧版本时，它在检查器中显示这个错误:

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

因此，在某种程度上，AWS 与 PWA 功能有关的事情并不融洽。是否有已知的修复方法？

此应用现已投入生产，非常感谢您的帮助。

---

更多详情:

有关更多背景信息，我的 index.html 包括以下内容:

 <link rel="manifest" href="manifest.webmanifest">

在 app/src 文件夹中，是 manifest.webmanifest:

{
  "name": "My App",
  "short_name": "My App",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

我还会注意到，从一开始让 Angular 应用程序在 Amplify 上运行会产生一些问题。首先需要添加以下内容才能使应用正常运行:

重写和重定向:

源地址

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|map|json|mp3|tff)$)([^.]+$)/>

目标地址

/index.html

类型

200 (Rewrite)

Answer 1

就像我在问题中指出的那样，为了让 Amplify 与 Angular 一起工作，我必须添加这样的重定向:

源地址

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|map|json|mp3|tff)$)([^.]+$)/>

目标地址

/index.html

类型

200 (Rewrite)

结果似乎是 Amplify 将重定向 list 文件(不在“源地址”下的文件类型组中)，因此 list 文件不会显示任何内容。

我将 webmanifest 文件类型添加到组中，现在它似乎可以正常工作:

源地址

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|map|json|mp3|tff|webmanifest)$)([^.]+$)/>

目标地址

/index.html

类型

200 (Rewrite)