Angular + Express PWA 504 网关

Question

I'm having trouble creating a PWA angular app with NodeJS + Express server.

• I'm serving my angular build --prod on a static path in Express
• I'm using routes in my Angular App
• The client manages to load manifest.json , ngsw-worker.js , ngsw.json?ngsw-cache-bust=[RANDOM] and all the rest of the files
• The client creates an SW and shows this gear icon on every request
• The DevTools Disable cache checkbox is disabled;)

Yet, when I check the Offline checkbox in DevTools and refresh the page I get 504 on the requested route, and then a few seconds later, a failed request from ngsw-worker.js

It's progress in my PWA app as I don't receive the Dinosaur chrome page.

Thanks in advance!

Answer 1

edit: Finally solved my related problem. My issue was that when I was running my ng build --prod . I had added && node patch.js to fix an issue in the build file. Apparently this was messing up my service worker hash. Now that I removed it everything is working great. Lesson being that you can't screw around with the build folder after it has been generated.

I have this exact same setup with the same problem that I have been fighting with for the past couple days. The service worker is being created correctly and I can see all JS chunks being downloaded on first loading. However I get the same 504 error when trying to go to a page offline that I have not already loaded while online.

One thought I was trying to look into was the "Referer" not pointing to the ngsw-worker on the 504 request. I'm not sure if that could be an issue specific to Express with Angular PWA.