Angular 7 Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script
Solution 1
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.
Solution 2
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 project
http-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.
Related videos on Youtube
Blue Space
Updated on May 23, 2022Comments
-
Blue Space almost 2 years
I am getting the following error
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.
I used the prompt "ng add @angular/pwa" to add my ngsw-config.json and manifest file. This prompt also added my "serviceWorker" : true statement and my register with environment to my app.module.ts
After verifying everything was added properly I then ran the command "ng build --prod" that built successfully and the dist shown was made dist folder
Then I ran "ng serve --prod" and I am receiving the errors shown in the image errors
Line being used in app.module.ts
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
ngsw-configuration:
{ "index": "/", "assetGroups": [ { "name": "app", "installMode": "prefetch", "resources": { "files": [ "/favicon.ico", "/index.html", "/*.css", "/*.js" ] } }, { "name": "icons", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [ "/icons/**" ] } } ] }
Placement of serviceWorker true in angular.json:
"configurations": { "production": { "serviceWorker": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ],
-
Blue Space over 5 yearsThank you! this solved it, up voted but too new to stack for it to show
-
P J over 5 years@AlexMalikov giving me error --> npm run precache > [email protected] precache C:\Users\Admin\Desktop\An7\test-app > sw-precache --verbose --config=sw-precache-config.js internal/modules/cjs/loader.js:582 throw err; ^ Error: Cannot find module 'C:\Users\Admin\Desktop\An7\test-app\sw-precache-config.js'
-
Ismoil Shifoev over 5 yearsYou need just npm install --save-dev sw-precache-webpack-plugin or npm install --global sw-precache
-
Ismoil Shifoev over 5 yearsThere is the problem that he don't see this package
-
Ismoil Shifoev over 5 yearsLet us continue this discussion in chat.
-
Sofía over 3 yearswhat do you mean with 'exports for your project'?
-
Peter Nixey over 3 years@Sofia - the compiled version of your project that webpack produces