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

Question

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)"
        ]
      }
    }
  ]
}

AlleXyS · Accepted Answer · 2021-02-24 15:50:52Z

1

change your manifest.webmanifest file to manifest.json and where it is used (angular.json, index.html and ngsw-config.json)

edited Feb 24, 2021 at 15:50

answered Dec 13, 2019 at 13:28

AlleXyS

2,5983 gold badges20 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1383029 Over a year ago

Can you explain this a bit more? Does it come from an older version?

AlleXyS Over a year ago

I don't know why angular generate a .webmanifest file instead of json. When you build the app, it will search for manifest.json. Also, to be found, you need to build your package from root location (where package.json and angular.json are located)

springandangular · Accepted Answer · 2019-12-13 13:23:24Z

0

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 Dec 13, 2019 at 13:23

springandangular

1453 silver badges11 bronze badges

Comments

Farman Ameer · Accepted Answer · 2022-09-14 02:10:28Z

0

I resolved the issue by running the following commands

npm install -g @angular/cli@latest
npm uninstall @angular-devkit/build-angular
npm install --save-dev @angular-devkit/build-angular
Delete node modules folder.
npm install

answered Sep 14, 2022 at 2:10

Farman Ameer

1,4822 gold badges17 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related