Trabajador de servicio angular: no se pudo cargar el recurso: el servidor respondió con un estado de 504 (tiempo de espera de la puerta de enlace)

83

Estoy usando Angular-CLI 1.6.6y @angular/service-worker 5.2.5en nuestra Angular 5.2.5aplicación. Todo funciona bien en el servidor lite local, así como en el servidor de producción, excepto por un mensaje de error que aparece en nuestro entorno de producción:

Error al cargar el recurso: el servidor respondió con un estado de 504 (tiempo de espera de puerta de enlace)

Buscando en el ngsw-worker.jsscript encontré las líneas (2466 siguientes) donde se genera el mensaje de error anterior:

    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',
            });
        }
    } 

El error de registro de la consola en la captura muestra el siguiente 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>

Un error que parece estar relacionado con esta pregunta: ¿Qué causa un error al ejecutar 'fetch' en 'ServiceWorkerGlobalScope': 'only-if-cached' se puede configurar solo con el error de modo 'mismo origen'?

El requisito que genera este error es cualquier primer acceso a la aplicación:

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

Al recargar la aplicación, el error no se repite.

¿Alguien puede ayudarme aquí? ¿Hay un error en safeFetch()el trabajador del servicio (tal vez para admitir HashLocationStrategy)? ¿Tengo que cambiar algo en mi configuración?

tobik
fuente
9
Parece que mucha gente se enfrenta a este problema. github.com/angular/angular/issues/20756 github.com/angular/angular/issues/20970 etc. No es que sea de ninguna ayuda, pero parece que se está analizando de
sje
1
Proporcione fuentes COMPLETAS (o mejor aún, stackblitz por favor :)
yomateo
¿Puede proporcionar una captura de pantalla de la pestaña de red, que muestra el 504?
Daniel Habenicht
2
Se ha trabajado un poco sobre el tema . @tobik, ¿esto sigue siendo un problema?
Joniras
2
es un error de cromo bugs.chromium.org/p/chromium/issues/detail?id=823392
Fateh Mohamed

Respuestas:

1

La desactivación del encabezado ETag del backend resolvió este problema temporalmente.

Tibin Thomas
fuente
¿Puede elaborar su respuesta, dónde puedo encontrar este ETag en una aplicación angular?
vndpal
Tienes que hacerlo en la configuración de backend.
Tibin Thomas