[ServiceWorker] localhost took too long to respond. HTTP ERROR 504

[NgxDev]

I'm submitting a...

[x] Bug report

Minimal reproduction of the problem with instructions

1. ng new sw --service-worker --routing
2. cd sw
3. ng g c home
4. ng g c about
5. Edit app-routing.module.ts to add the routes for the 2 components we've just created:

// ...
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

// ...

6. ng build --prod
7. npm install -g http-server (you can use any server to test this, if you already prefer another one)
8. http-server dist
9. Access localhost:8080 (8080 is the default port that http-server uses at the time of reporting this issue)
10. Access localhost:8080/about
11. Stop the server
12. Now try reloading the app while on the /about route (if it works the first time, try refreshing a few more times or wait a little before trying again). The browser will display the message:

This page isn’t working
localhost took too long to respond.
HTTP ERROR 504

(With Universal/SSR, it stops working right away, most of the time with the first refresh after stopping the server, no matter the route - and the issue is not the hash in the generated ngsw.json, because I regenerate that at the end of the build process).

Now, if you start the server again, loading the app on the /about route works (even though http-server is not SPA friendly, it doesn't redirect all requests to index.html), but the service worker kicks in.
Initially I noticed this behavior on a Universal app, doing server side rendering (following the universal-starter repo). So this is not a http-server "not being SPA friendly" issue.
I only used http-server to reproduce it because I wanted to keep the reproduction process as fast as possible, without introducing server side rendering.
The CLI version used (1.6.4) initializes the app with Angular 5.1.0, but I've also tested on 5.2.1. I've skipped mentioning this step above because it happens regardless of the Angular version (at least on >= 5.1.0, haven't tested with older versions).

Environment

Angular CLI: 1.6.4
Node: 8.9.4
OS: win32 x64
Angular: 5.2.1

Browser:
I've only tested on:
- [x] Chrome (desktop) version 63.0.3239.132
- [x] Chrome (desktop) version 65.0.3323.2 (canary)

[NgxDev]

I've just realised that the same things also happen with API requests (urls which are set up in "dataGroups"), not just with static assets. If I stop the API server, I get 504 Gateway Timeout (from ServiceWorker) if I open to check the network tab.
I'm sure that this was working fine at some point in the past, but the more I think about it, the more I'm wondering if this might rather be an issue for the CLI instead?...

[odahcam]

I'm with the same error here, when I'm online I can see a lot of things being loaded by the service worker, but when I turn into online, nothing is loaded.

[odahcam]

Seems like when I disable the SW registration already having it registered, the offline functionality works fine. 🤔

[KGALLET]

Seems like I've got the same issue

[jackkoppa]

I believe the root cause would be the same as the issue for this SO question I posted: How to handle routing in Angular 5+ Service Workers? It doesn't seem that Angular 5+ gives us a way to route service worker handling for non-index routes, at least that I can find.

[DominicBoettger]

same error here? So is the service worker in ng5 not usable?

[odahcam]

In CLI projects it works fine, I really don't know what's the problem. 😕

[jackkoppa]

@odahcam - does that mean, in a CLI project on Angular 5, you're able to handle routing with the generated service worker? And if so, how? Sorry, not sure if you mean "you don't know where the problem comes from" or "you're not sure what problem other people are having, because it works for you"