Bug: Ionic serve showing old content

[matheusdavidson]

Short description of the problem:
Ionic serve/livereload displays old content after refreshing. When I make changes to my app, the build completes and browser refreshes, then I see old content. Sometimes the changes do not apply, and sometimes I see an old page that I already changed multiple times.

What I do to resolve this is restart ionic serve or run npm run build and refresh the page manually. Clearing browser cache and refreshing page solves this issue some times, but not all the time. So I don't think it's a browser cache issue.

What behavior are you expecting?
When the browser refreshes after a new build, it should display new updates.

Steps to reproduce:
This issue is really random.

Create new project
Run ionic serve or ionic run -l
Keep making changes to your app
Eventually the problem will occur

Which version are you using?
3.1.9

[matheusdavidson]

not fixed as stated in #825

[jwelmac]

I am having the same problem

[jmarceli]

Did you try to check "Update on reload" in Google Chrome Dev Tools (inside Application tab):

This solves my issues instantly...

[physedo]

same problem here

[realtrehan]

This is really very annoying..the caching of pages. Is there an option to force not cache anything while in dev debug mode? I tried the dev tools in chrome but still shows cached page code. Any update to fix this ? A serious productivity killer as you are struggling to debug issues (which are complicated coz of caching pages views)

[windwp]

same problem here

[smartin85]

same problem here. It´s not a browser caching problem. The content in www-folder doesn´t update.

[rmfranciacastillo]

Can't believe that this problem persists since 2017 and ionic 2. It's really frustrating updating components this way. Anybody knows if there's a cli command to avoid caching.

[swvcc]

Having the same problem. This is a petty issue and should be resolved. There is no reason caching should be out of control like this.

[matheusdavidson]

anyone having this issue, use ionic 4 if you can, it doesn't use app scripts anymore so the problem will go away

[swvcc]

using ionic 4 is not a solution. I've been explicitly told in the Ionic support channel by engineers that Ionic 4 is not ready and was told not to use it. This should be fixed in the meantime.

[matheusdavidson]

@swvcc i created this issue because another one with the same bug was here for 2 years and it was closed, do you think anyone will solve this? haha

I'm using ionic 4 for some time now and today they released a beta, use it, don't worry, its just angular.

[Ketec]

Same issue - sometimes i may not instantly notice that it server old, cached version and i end up tryign to debug the problem - wasting time.

So i have to shut down the serve and restart.

Just moments ago it server hours old version of the code - code i had changed and already commited to git.

Ionic 4 is not a solution indeed - it is in very early development and is not fit for commercial production.
And likely won't be for another year. And even then migrating over is likely going to need huge amount of work.

[pivalig]

Try to look at the service worker approach

[diver2]

I'm using ionic 4 and I get the same bug... it shows some other project, sometimes shows a blank page, sometimes show my project (I just created a ionic start blank project and I have the bug - mac OS, ionic 4, angular 6.1)

[matheusdavidson]

@diver2, did you create with type=angular?
otherwise it will use ionic-app-scripts

[diver2]

i did create it with --type=angular

[sagrawal31]

@jmarceli's workaround worked for me #1432 (comment)

[Stiwoz]

I'm still having this issue, even tho I checked "Update on reload" and "Bypass for network" in the service workers tab in Chrome 69.0.3497.100

After the first ionic serve command everything works fine for a while. Then it seems to start compiling only the files that has been manually saved, ignoring all the changes from the previous save. This is especially apparent when changing something in a service/component and then change a template:

• make a change in a component/service
• save
• wait for it to reload
• change something in a template
• save and wait for it to reload

What happens is that the changes in the service/component get ignored while the template is updated. At this point, saving again the component/service again (even without changes) "updates" everything correctly.

Hope this helps a little.

EDIT: ionic info output:

Ionic:

ionic (Ionic CLI) : 4.2.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : 8.1.1 ([email protected])
Cordova Platforms : android 7.1.1, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.1.4, (and 7 other plugins)

System:

Android SDK Tools : 26.1.1 (/Users/stefanosanvito/Library/Developer/Xamarin/android-sdk-macosx)
ios-deploy : 2.0.0
NodeJS : v10.3.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS
Xcode : Xcode 10.0 Build version 10A255

[sagrawal31]

Enabling the setting in Developers Console -> Application -> Bypass for network (in Google Chrome) working for me for a longer time.

[ghost]

I have to report that this issue is still happening... extremly annoying, happens at random times and really makes you waste a lot of time trying to figure out what is going on to then realize nothing happened, just a cache issue... constantly having to restart and run ionic serve again and again...

[voltairebiton]

Still happening on my end also using ionic 4. Its happening when my chrome browser refreshes in device mode. But when i turn off device mode and refresh the page it will be ok. The same issue happen in incognito mode so i think its not browse cache issue.

[msjo78]

December... Any luck anybody? I think I have wasted weeks on ionic serve commands to refresh, very close to ditching the framework

[diver2]

it works for me now... i just reinstalled everything... see if reinstalling node... I honestly don't know what was the change...

[ludovictomlo]

The issue persists, for html files for example webpack update only starts after saving the file for the second time

[RiskyVector]

This issue has been here ever since I started developing with Ionic. I kind of got used to restarting it every time it happens, but it's SO annoying man...

[Stiwoz]

I really hope this will be fixed with the Ionic 4 update, otherwise we (my company) will switch to Flutter. It's so annoying having to waste 20% of your time every day trying to debug something you fixed 10 minutes ago.

[SirajKakeh]

why is it 2019 and this is still a bug?

[RaschidJFR]

Thanks @intodevelopment who has sent a Pull Request this month. Hope that will be reviewed soon.

[liamdebeasi]

Hi everyone,

This has been resolved via #1521. I have released version 3.2.4 of app-scripts with this fix. npm i @ionic/[email protected].

We appreciate your patience with this issue. Thanks!

[dhaneshgosai]

Hello Team,

I am having the same cache problem in my project.

I have updated my app-scripts to the latest version but still, cant solve my cache problem and its running with old code.

Any solution for this?

My Ionic Info details:

`Ionic:

ionic (Ionic CLI) : 4.1.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.6.2
@angular-devkit/core : 7.3.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/ng-toolkit : not installed
@ionic/schematics-angular : not installed

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : browser 6.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 5 other plugins)

System:

ios-deploy : 1.9.4
ios-sim : 8.0.1
NodeJS : v8.11.4 (/usr/local/bin/node)
npm : 5.6.0
OS : macOS
Xcode : Xcode 10.3 Build version 10G8`

[intodevelopment]

I think it is best to create a new issue. This was an issue that affected Ionic v3, you appear to be running Ionic v4. The internals have changed a lot since then.