Failed to get index.html with Angular service worker first time

Question

I inherited an Angular app using a service worker.

Sometimes when I refresh the page for a small second I see a Chrome error page:

And just after the real page is displayed.

When I check in the network tab I have those:

So the first page load is failed for a network issue then the exact same page is provided by the service worker just after.

I was able to reproduce it on a local server so I doubt it's a real network error (and every other files can be loaded without any issue).

In the service worker logs I got:

Console: {"lineNumber":0,"message":"The FetchEvent for "https://..." resulted in a network error response: the promise was rejected.","message_level":2,"sourceIdentifier":1,"sourceURL":""}
Console: {"lineNumber":0,"message":"Uncaught (in promise) UnknownError: Unexpected internal error.","message_level":3,"sourceIdentifier":1,"sourceURL":"https://.../ngsw-worker.js"}

In Angular our config seems quite straightforward, the import in the root module :

ServiceWorkerModule.register('./ngsw-worker.js', {
  enabled: true,
}),

For my tests "true" is hardcoded but it's in the config file. In some environment it's disabled then we don't have this issue anymore...

The ngsw-config:

{
"index": "/index.html",
"assetGroups": [
{
  "name": "app",
  "installMode": "prefetch",
  "resources": {
    "files": [
      "/favicon.ico",
      "/manifest.json",
      "/index.html",
      "/*.css",
      "/*.js"
    ]
  }
}
]
}

@angular/core: ~13.2.3 @angular/service-worker: ^13.2.3

Any help/hint is welcome!

Update

I removed index.html from my ngsw-config.json file to prevent it to be cache by the service worker :

"index": "", "assetGroups": [ { "name": "app", "installMode": "prefetch", "resources": { "files": [ "/favicon.ico", "/manifest.json", "/.css", "/.js" ] } }]

It's indeed not cache anymore but it still intercepted by the service worker and it's still in error sometimes:

If I check the service worker's option "bypass for network" in Chrome developer tool I don't get this error anymore.

Are you able to visit localhost:xxxxx/ngsw-worker.js? What do you see then? — Pieterjan
– Pieterjan, Commented Sep 16, 2022 at 7:22
I'm able to visit it and I get the service worker file generated by Angular build. — Arcord
– Arcord, Commented Oct 7, 2022 at 21:47

Park Numb · Accepted Answer · 2022-09-16 07:04:39Z

0

You can try:

In file index.html, add this line

<base href="/">

And file ngsw-config.json, you doesn't need cache file index.html "index": "",. Sometimes there is no need to cache the index file to always run the latest code correctly.

Hope this help!

answered Sep 16, 2022 at 7:04

Park Numb

1,0815 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arcord Over a year ago

Unfortunately this doesn't help. I updated my question with new informations. In short it's indeed not cache anymore (call to get the new index.html is done every times) but it still intercepted by the service worker and the error still occurs.

Collectives™ on Stack Overflow

Failed to get index.html with Angular service worker first time

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related