CODEWITHSUNDEEP
angularservice-worker
springandangular
springandangular

Reputation: 145

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

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

Upvotes: 3

Views: 6135

Answers (3)

Farman Ameer
Farman Ameer

Reputation: 1462

I resolved the issue by running the following commands

  1. npm install -g @angular/cli@latest
  2. npm uninstall @angular-devkit/build-angular
  3. npm install --save-dev @angular-devkit/build-angular
  4. Delete node modules folder.
  5. npm install

Upvotes: 0

AlleXyS
AlleXyS

Reputation: 2598

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

Upvotes: 1

springandangular
springandangular

Reputation: 145

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.

Upvotes: 0

Related Questions