Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

[chamikasandamal]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Angular service worker application throws following error

Failed to load resource: the server responded with a status of 504 (Gateway Timeout)
ng new my-project --service-worker

Expected behavior

It should not throw any exceptions

Minimal reproduction of the problem with instructions

ng new my-project --service-worker
ng build --prod
cd dist http-server -p 8080
Even with IIS host i can see the same issue.

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.2.6


Browser:
- [x] Chrome (desktop) version 64.0.3282.167
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v9.5.0  
- Platform:  Windows 

Others:

[EreckGordon]

I have ran into this same issue. Rather than open a new ticket, I will just add my findings here:

It seems to happen when you open chrome devtools.

I believe this is the line causing the problems, but not 100% sure:

angular/packages/service-worker/worker/src/driver.ts

Line 376 in c8a1a14

return this.safeFetch(event.request);

NGSW Debug Info:

Driver state: NORMAL ((nominal))
Latest manifest hash: 194dd40f1434a36f13c49709bb82e2caf2ad706f
Last update check: 2s964u

=== Version 194dd40f1434a36f13c49709bb82e2caf2ad706f ===

Clients: 5a10d896-2b1e-43aa-890f-04b96017eb19, b1708689-20fc-4469-81da-ddbbc28ed406

=== Idle Task Queue ===
Last update tick: 3s69u
Last update run: 10s411u
Task queue:
 * check-updates-on-navigation

Debug log:

[15s420u] TypeError(Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode, TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
    at Driver.safeFetch (https://universal-demo.ereckgordon.com/ngsw-worker.js:2464:37)
    at Driver.handleFetch (https://universal-demo.ereckgordon.com/ngsw-worker.js:1975:25)
    at <anonymous>) Driver.fetch(https://universal-demo.ereckgordon.com/)

here's the line that is being referenced by the error message: https://github.com/EreckGordon/angular-universal-pwa-starter-deploy/blob/master/dist/dist-browser/ngsw-worker.js#L1975

some googling shows me some other people that seem to have solved their issue in their own respective projects:

thgh/sapper-template@cccd9b9
https://github.com/paulirish/caltrainschedule.io/pull/51/files

@alxhub

[tkohr]

I have also run into the same problem (https://stackoverflow.com/questions/48828413/angular-service-worker-failed-to-load-resource-the-server-responded-with-a-st).

In my case the error is triggered by the "request"/URL that initializes of my Angular 5 app (using hash style URLs, like: https://example.com/nightly/#/connect). As the part behind the # should usually never be sent to the server, I am surprised to find the (entire) URL in the fetch event of the service worker.

There, the request has the following data:

So according to the error message, the attributes "cache" and "mode" generated by my Angular app (HashLocationStrategy) are conflicting with the service worker fetch implementation of Chrome v64.

I see 3 options here:

a) Prevent Angular to send the init URL of its application (https://example.com/nightly/#/connect) to the service worker
=> I do not know if such a thing is possible or if the browser handles this completely.

b) Prevent the service worker to do a fetch for the init URL of the Angular app
=> a condition such as https://github.com/paulirish/caltrainschedule.io/pull/51/files would do the trick
=> Would this be a proper solution?

c) Manipulate the attributes "cache" or "mode" either in the Angular app or the service worker to values not conflicting with Chrome v64.
=> I guess this is not the right approach, as the attributes are read-only (https://developer.mozilla.org/en-US/docs/Web/API/Request/mode)

@EreckGordon & @chamikasandamal : Which are the URLs that trigger the error on your side?

[EreckGordon]

It seems to trigger for me on any url, only the first time opening dev tools while viewing the site. If you close the tab, then reopen the site and reopen dev tools the error appears again.

I don't use hash routing. Here's a site demonstrating the issue:

https://universal-demo.ereckgordon.com/

[akilmakda]

I have also run into the same problem but in my case in local server http-server -p 8000 all images load. but when i upload dist folder to server first time load all images after soft refresh only https images load but http images not load. (when images load form service worker that time issue occurred).

After hard refresh (Ctrl + Shift + r) all images load.

why angular service worker not load http images?

thanks in advance.

[gkalpak]

@akilmakda, this sounds like a different issue. If you think it is related to @angular/service-worker, please open a new issue and provide all relevant details (including a minimal reproduction).

[akilmakda]

@gkalpak

Need open new issue?

Demo application : https://github.com/akilmakda/PWA-not-work-in-HTTP.git

URL : https://github.com/akilmakda/PWA-not-work-in-HTTP

[gkalpak]

@akilmakda, the error message (which comes from the browser, not @angular/service-worker) explains why it is failing. I don't think this is related to Angular's ServiceWorker.

(In any case, this issue is not the place to discuss unrelated problems. If you still think there is an issue with @angular/service-worker please open a new isue.)

[akilmakda]

Create new issue #23012

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}