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

This issue has been created 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.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-09-30
Star Count 84080
Watcher Count 3064
Fork Count 22235
Issue Count 1197

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Independent UI and an overall navigate UI 0 2022-01-08 2022-09-17
RFC: use array-location structure to replace BTreeMap to index epoch 2 2022-06-30 2022-09-23
Error: Genome object instantiation 2 2017-05-10 2022-08-18
Hyperlink Channels from the dashboard to the channels grid 1 2022-01-27 2022-08-28
ETW already present in 3.6.0 2 2022-01-04 2022-09-08
highlighting & completion in a file described by a grammar 5 2021-12-31 2022-09-23
WeChat state parameter is too long 4 2022-07-08 2022-09-15
Error with KoinJavaComponent 1 2021-07-23 2022-09-12
[QUESTION] How can I get _modules in new Koin versions? 2 2021-07-20 2022-09-28
[ external - wildfly] : status 1 2022-04-11 2022-09-23
为什么现在使用的并没有findAll这个api 1 2021-09-10 2022-07-08
When I use Model.hasOne function to create a Association, I found a weird thing 0 2021-07-30 2022-07-08
Start a new network with specific channel 3 2022-09-06 2022-09-21
Ping the external internet does not work 1 2022-09-09 2022-09-21
Regression - BlackParrot+Arty demo.bin stuck on lift-off 2 2022-04-01 2022-09-18
[BUG] Bad temperature readout on RHEL8 over SSH 8 2021-11-25 2022-09-23
Add ESLint rule for member delimiter style 0 2022-03-27 2022-08-17
Session closing email contains no information about extended deadline 0 2022-04-22 2022-09-08
"export 'hydrateNever' was not found in 'vue-lazy-hydration' 2 2020-11-17 2022-09-12
Bug: Windscribe Openvpn certificate verify failed 12 2022-04-30 2022-09-18
Company name is Justin Kim 1 2021-03-12 2022-09-09
Kafka bridge connector 2 2020-07-02 2022-09-27
[Hint]Resolve redundant off-heap memory used 0 2022-08-13 2022-09-27
Can't update 0 2021-12-08 2022-01-11
rawhide: 37.20220808.91.0: miniso-install-nm testiso scenario failing 8 2022-08-09 2022-09-07
tracker: This Month in Fedora CoreOS August 2022 0 2022-08-10 2022-09-07
Rewrite useFullscreen hook 0 2021-09-04 2022-09-28
正常的拼音输入导致程序崩溃 2 2021-06-16 2022-01-13
使用cario时碰到的一些问题 3 2021-08-06 2022-01-13
Update Move-PnPFile.md 1 2021-11-02 2022-09-23
Is the independent module carrying dbcontext transactional? 7 2022-03-14 2022-09-06
Update to the feature documentation is needed 0 2022-03-14 2022-09-12
abp.io get started page preview check label color not as expected 1 2022-03-14 2022-08-23
Expose the replacement function as a named export instead 8 2021-03-24 2022-09-23
FSA - Policy Renewal 0 2021-12-06 2022-09-26
simpl.rent 0 2021-12-11 2021-12-05
Multiple Viewer instances render the same pdf 3 2022-03-04 2022-09-06
[4.0] Invisible platforms when using CharacterBody3D + CollisionShape3D 2 2022-09-12 2022-09-13
can not set device 22 2021-07-08 2021-11-02
Improve Wasmer 3.0 migration example 0 2022-08-13 2022-09-19
Change in error message requires change in dev mode test case. 0 2022-08-30 2022-09-27
Normal docker build gets logged as ERROR because of `docker scan` message 0 2022-08-19 2022-09-19
xamarin.google.ios.signin throwing NSInvalidArgumentException Reason 0 2022-01-01 2022-09-14
WiFi tethering only some clients can connect 7 2021-12-31 2022-09-16
Serializing cancelled reponses 8 2022-03-31 2022-09-26
startingDateValue and endingDateValue error 2 2021-01-21 2022-07-21
Not possible to silence new lint about dbg in tests without editing tree 0 2022-06-08 2022-09-29
Date granularity range option for stock chart to show any data for any time for the entire date range selected 4 2022-06-08 2022-07-06
Support ES2017 SharedArrayBuffer & Atomics 0 2021-10-24 2022-08-14
[bullmq] memory leak when error throw inside event listener 3 2022-03-10 2022-09-28