Angular ServiceWorker returned response 404 Not Found with output-hashing enabled

Issue

Creating Angular (8.2.14 Core, 8.2.14 Compiler) production builds with output-hashing enabled by default:

ng build --prod

In the dist folder files are output with hashes, for example:

runtime-es2015.3e680dc09930fcde0e9e.js

When I deploy a new production build and reload my Angular application, I get the following error:

ngsw-worker.js:596 Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for HOST_URL/runtime-es2015.e7cba659031e36694bf2.js returned response 404 Not Found
    at PrefetchAssetGroup.<anonymous> (ngsw-worker.js:596)
    at Generator.next (<anonymous>)
    at fulfilled (ngsw-worker.js:320)

This is because the output hash for the runtime file has changed between production builds and the service worker can no longer find the file. This happens with multiple files.

This prevents my application from reloading. You have to clear the cache for the application to start working again.

How do I resolve this issue? Shouldn't service worker fail gracefully if it can not find the file and allow the page to reload?

Here is my ngsw-config.json file:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "start_url": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Solution

Answering my own question, using the NPM package ws to serve the production build seems to be the issue.

Could not reproduce the issue when using NPM package http-server to serve the production build for testing.

Answered By - springandangular