Angular 7 Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script

Since you have mentioned the root as dist folder, your service-worker.js file must be in the dist folder after you run the ng build script.

Add "precache": "sw-precache --verbose --config=sw-precache-config.js" to your package.json scripts object.

Then run: ng build --prod --aot, then npm run precache. Now your service-worker.js file would be present in the dist folder.

Since the angular compiler has compiled your app code into js files and stored it in the dist folder, now you must serve your app from the dist folder.

But the default ng serve doesn't support it. I suggest you use http-server. npm install http-server -g. Then http-server ./dist -o. This opens up your app on the default browser.

Using Angular 10, the solution is just simply to run http-server rather than ng-serve which unfortunately doesn't support service workers.

1. Use NPM to install http-server:

npm install http-server --save-dev

2. Serve your project using http-server

Then (let's assume your project is called my project), run:

# cd into the root folder for your angular projecthttp-server -p 8080 -c-1 dist/myproject

i.e. this assumes that the exports for your project are located in the folder dist/myproject/ (change if not).

Note: the -c-1 instruction tells HTTPServer to switch off caching - see docs for details.