Service Worker Gets in loop on live reload after upgrade to Angular 14

This issue has been tracked since 2022-09-15.

Which @angular/* package(s) are the source of the bug?

compiler, service-worker, Don't known / other

Is this a regression?

Yes

Description

After upgrading to Angular 14, when a change is made to html or js in visual studio code, the compiler will complete and the browser will refresh x times (sometimes around 20) when service worker is enabled. When it is disabled the browser will reload once. No console errors are present, the service worker shows as being installed successfully through dev tools

Please provide a link to a minimal reproduction of the bug

https://github.com/AnnaO555/angular14SW_BUG.git

Please provide the exception or error you saw

there was no exception, the browser gets stuck in a loop for a while

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.2.2
Node: 14.15.4
Package Manager: npm 6.14.10
OS: win32 x64

Angular: 14.2.1
... cdk, common, compiler, compiler-cli, core, elements, forms
... router, service-worker

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.1402.2
@angular-devkit/build-angular       14.2.2
@angular-devkit/core                14.2.2
@angular-devkit/schematics          14.2.2 (cli-only)
@angular/cli                        14.2.2
@angular/platform-browser           14.2.2
@angular/platform-browser-dynamic   14.2.2
@schematics/angular                 14.2.2 (cli-only)
typescript                          4.7.4
webpack                             5.74.0

Anything else?

cut down repro above

gkalpak wrote this answer on 2022-09-16

I can confirm this does happen 🤔

I see that you have production: true in your development config, which activates the ServiceWorker. I think I recall that the ServiceWorker used to not work with ng serve (even when targeting production), but I am not sure if this has changed.

Generally, the ServiceWorker is not supposed to be used in development (with live-reload enabled), but I am not sure if it ever worked and if it accidentally broken.

@AnnaO555, you mention that it broken while upgrading to v14. What is the previous version that you used and this setup worked?

alan-agius4 wrote this answer on 2022-09-16

Since version 14.2, ng serve supports serving the service-worker. I was also managed to replicate this, but this definitely needs some further investigate to determine if it's a problem with the service-worker or dev-server.

AnnaO555 wrote this answer on 2022-09-21

@gkalpak we were using 13.3.1 before and it was working nicely.

gkalpak wrote this answer on 2022-09-21

Thx for the info, @AnnaO555.
It is probably because the Angular CLI did not include the SW in the build with ng serve before 14.2.0.

If you don't need the SW in dev mode (which you probably don't), you could try setting a property (for example, serviceWorker: true/false) in your environment configs (setting it to true for production and false for dev) and then using that to configure the ServiceWorkerModule's enabled property.

AnnaO555 wrote this answer on 2022-09-21

@gkalpak thanks for the info and toggle suggestion, we can do this in the short term but we are an offline first product so not having this working during development as it was will slow us down. Hopefully it can be looked into and resolved

alan-agius4 wrote this answer on 2022-09-21

@AnnaO555, prior to version 14.2 the service worker was never generated/served when using the dev-server.

TimGels wrote this answer on 2022-09-28

The workaround mentioned by @gkalpak seems to be working for me. If someone reads this and it still does not work, make sure to have unregistered / removed the service worker in the browser and try again.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-10-05
Star Count 84152
Watcher Count 3063
Fork Count 22247
Issue Count 1203

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date