Angular 7无法注册ServiceWorker：获取脚本时收到错误的HTTP响应代码（404）

Question

我收到以下错误

ERROR Error: Uncaught (in promise): TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

我使用提示“ng add @ angular / pwa”来添加我的ngsw-config.json和manifest文件。此提示还将我的“serviceWorker”：true语句和我的环境注册添加到了我的app.module.ts

在确认所有内容都正确添加后，我运行了成功构建的命令“ng build --prod”，并显示了dist显示的dist folder

然后我运行“ng serve --prod”，我收到图像errors中显示的错误

在app.module.ts中使用的行

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

NGSW配置：

{
  "index": "/",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "icons",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/icons/**"
        ]
      }
    }
  ]
}

service.er放置在angular.json中的true：

"configurations": {
            "production": {
              "serviceWorker": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],

Answer 1

由于您已经提到root作为dist文件夹，因此在运行service-worker.js脚本后，ng build文件必须位于dist文件夹中。

将"precache": "sw-precache --verbose --config=sw-precache-config.js"添加到package.json脚本对象中。

然后运行：ng build --prod --aot，然后npm run precache。现在你的service-worker.js文件将出现在dist文件夹中。

由于角度编译器已将您的应用程序代码编译为js文件并将其存储在dist文件夹中，因此您现在必须从dist文件夹中提供应用程序。

但默认的ng serve不支持它。我建议你使用http-server。 npm install http-server -g。然后http-server ./dist -o。这会在默认浏览器上打开您的应用。