Live reload repeats infinitely after upgrading Ionic and Angular

Hi,
I’ve upgraded my app from Ionic 6 to Ionic 8 (Via version 7), and also gone from Angular 14 to 18 (step by step)

After doing so, I experience that when I’m running ionic serve and save my code, live reload starts, and keeps reloading over and over again. It goes so fast that I am not able to see if there are any errors. It can keep doing that for minutes before I eventually have to close the browser window.

If i build the app and runs it on a device, things work as they should.

I’m not even sure where to begin here.

Here is my ionic info

Ionic:

   Ionic CLI                     : 7.2.0 (hidden path)
   Ionic Framework               : @ionic/angular 8.4.0
   @angular-devkit/build-angular : 18.2.12
   @angular-devkit/schematics    : 18.2.12
   @angular/cli                  : 18.2.12
   @ionic/angular-toolkit        : 11.0.1

Capacitor:

   Capacitor CLI      : 6.1.2
   @capacitor/android : 6.1.2
   @capacitor/core    : 6.1.2
   @capacitor/ios     : 6.1.2

Utility:

   cordova-res : 0.15.4
   native-run  : 2.0.1

System:

   NodeJS : v18.20.4 (/usr/local/bin/node)
   npm    : 9.9.3
   OS     : macOS Unknown

I have the same issue. Any ideas on what has gone wrong?

Here is my Ionic info:

Ionic CLI : 7.2.0 (hidden path)
Ionic Framework : @ionic/angular 8.4.0
@angular-devkit/build-angular : 17.3.11
@angular-devkit/schematics : 17.3.11
@angular/cli : 17.3.11
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.11.0
npm : 10.9.0
OS : Windows 10

Another interesting thing. This seems to be happening in Chrome (v131.0.6778.85 installed). Viewing the app in Firefox does not cause live reload over and over again.

This is to do with the service workers as now the SWs are enabled in development. I can’t remember the fix that I found online but one way to resolve it the first time you run your development is to go into the browser developer tools and unregister the service worker. If this helps, here is my angular.json

“Since version 14.2, ng serve supports serving the service-worker.”

Found this: Service Worker Gets in loop on live reload after upgrade to Angular 14 · Issue #47455 · angular/angular · GitHub

1 Like

thanks @lazmeister! Unregistering the service worker fixed the issue for me.