Ionic Serve Live Reload Not Working

Question

I just bought a new MacBook and installed ionic/cordova on my machine, but alas "ionic serve" no longer live reloads HTML changes. Specifically, I see it reloading, but once the reload is complete, the changes are not reflected. Curiously, changes to *.ts reload fine! Any ideas? I'm a newbie but having to stop/start the server each time for every little change is driving me crazy - thank you!

Ionic Framework: 2.0.0-rc.5
Ionic Native: 2.4.1
Ionic App Scripts: 1.0.1
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 7.5.0
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Here's what I see on terminal:

[23:10:04]  build started ... 
[23:10:04]  transpile started ... 
[23:10:08]  transpile finished in 3.93 s 
[23:10:08]  webpack update started ... 
[23:10:09]  webpack update finished in 524 ms 
[23:10:09]  build finished in 4.46 s 

Thorlie

Possible duplicate of Ionic serve not working in Ionic 3 – Loaiasis

It is not a dupe. That question is about reload not detecting file changes - in this one, reload does detect file changes and reloads, but the changes aren't reflected. – Astrobiology

I have this same problem - you don't have to restart ionic serve every time, you can just hit "refresh" on the browser after it's finished refreshing (which is annoying, but less annoying). – Astrobiology

I suggest upgrading to the latest Ionic version, 3.9.2. I remember having this problem with older versions of Ionic, but I don't have it anymore. github.com/ionic-team/ionic/blob/v3/CHANGELOG.md – Scone

Update tsconfig.json file – Achernar

Answer 1

Dev environment:

• Node - v10.17.0
• Npm - v6.11.3
• ionic - v5.4.5

I resolved this issue as follows:

• Updated ionic: npm i -g ionic (went from 5.4.5 to 5.4.6)
• Ran ionic repair

Cockayne

ionic repair did the job for me. Thanks for sharing! – Crud

Answer 2

Update tsconfig.json file

 "compileOnSave": true,
 "compilerOptions": {
    "watch": true,

Achernar

Answer 3

Good morning, I was having the same issues, until I figured out that everytime that you make a change you have to wait until it get fully reloaded, if you make multiples changes the time until building and deploying to ionic serve starts to get very slow.

Resuming, my solution was to wait until the very end so I could see that it was successfully deployed to the ionic serve.

Dividivi

That doesn't seem to be my issue as I've tried it with minor changes and it won't reload (or rather, re-render) HTML changes. It DOES however reload/render changes to SCSS or TS perfectly fine! – Thorlie

Answer 4

remove node_module folder and run: "npm install" after that try "ionic serve"

Spile

Answer 5

I solved the issue by creating a new project, then just copy the files with the source code into this new project.

Create new project

$ ionic start App5-WishList tabs

Run server

$ ionic serve

Demandant

Answer 6

$ cd ProjectFolder
$ ionic serve

http://ionicframework.com/docs/v2/intro/installation/

Arceliaarceneaux

I'm not new to ionic serve - my problem is that for some reason, changes to html files do not render after the live reload. Changes to SCSS and TS reload/render perfectly fine. Any ideas? – Thorlie