HELP! ionic serve not reloading browser

Ionic Framework
1

Running on Win11
Ionic v6.20.8
Capacitor / Angular app

I’ve been building an app for months now and all of a sudden ionic serve does not want to reload the browser when I make a file change. The CLI shows “Compiled successfully” but the browser does nothing.

I’ve tried refreshing the @ionic/cli install and the node modules.

  1. ionic serve starts up, opens the browser, app is running great.
  2. I make a change to an html file, the CLI acknowledges, the browser reloads
  3. I make another change to the same file, the CLI acknowledges, the browser does nothing
  4. I make a change to a module.ts file, the CLI acknowledges, the browser reloads
  5. I make another change to the same module.ts file, the CLI acknowledges, the browser does nothing
  6. I try reloading the browser - the app state reflects the first but not second change

I assume something in my environment is off, but no idea what.

> ionic info

Ionic:

   Ionic CLI                     : 6.20.8 (C:\Users\username\AppData\Roaming\nvm\v19.4.0\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.5.1
   @angular-devkit/build-angular : 15.1.3
   @angular-devkit/schematics    : 15.1.1
   @angular/cli                  : 15.1.1
   @ionic/angular-toolkit        : 7.0.0

Capacitor:

   Capacitor CLI      : 4.6.2
   @capacitor/android : 4.6.1
   @capacitor/core    : 4.6.2
   @capacitor/ios     : 4.6.1

Utility:

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

System:

   NodeJS : v19.4.0 (C:\Program Files\nodejs\node.exe)
   npm    : 9.2.0
   OS     : Windows 10

Thanks!

2

Try with a different node version, angular doesn’t play well with even versions because they don’t support non LTS version, so try switching to 18.

3

Thank you for the suggestion! I did try changing to 18.13 with no change, but in the process I did notice that some pages were refreshing. I looked at a few things when comparing, and ended up learning that the filenames for a component I was including and the include statements were using different capitalizations.

include { TheComponent } from './the-component/TheComponent.page';

Where the filename was actually

the-component/theComponent.page.ts

Once I corrected the path from to match the filename it resolved the live reload issue!

Now off to some more productive coding!