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

13,668

Disabling ETag header from backend solved this issue temporarily.

Share:
13,668
tobik
Author by

tobik

Updated on June 15, 2022

Comments

  • tobik
    tobik almost 2 years

    I am using the Angular-CLI 1.6.6 and @angular/service-worker 5.2.5 in our Angular 5.2.5 app. Everything works fine on the local lite-server, as well as on the production server, except for one error message popping in our production environment:

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

    Looking into the ngsw-worker.js script I found the lines (2466 following) where the error message above is generated:

        async safeFetch(req) {
            try {
                return await this.scope.fetch(req);
            }
            catch (err) {
                this.debugger.log(err, `Driver.fetch(${req.url})`);
                return this.adapter.newResponse(null, {
                    status: 504,
                    statusText: 'Gateway Timeout',
                });
            }
        } 
    

    Console logging err in the catch puts out the following error:

        TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
            at Driver.safeFetch (ngsw-worker.js:2464)
            at Driver.handleFetch (ngsw-worker.js:1954)
            at <anonymous>
    

    An error that seems related to this question: What causes a Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode error?

    The req that generates this error is any first access to the app:

    https://example.com/test/#/connect
    https://example.com/test/#/map?token=[accestoken]
    ...
    

    On app reload the error is not repeated.

    Can anybody help me out here? Is there a bug in safeFetch() of the service worker (maybe to support HashLocationStrategy)? Do I have to change anything in my config?

  • vndpal
    vndpal over 4 years
    can you please elaborate your answer, where can i find this ETag in an angular application.
  • Tibin Thomas
    Tibin Thomas over 4 years
    You have to do it in backend config.
  • Tatyana Molchanova
    Tatyana Molchanova over 2 years
    It doesn't work for me.