Bug: Ionic serve showing old content

[ihadeed]

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.

1. Create new project
2. Run ionic serve or ionic run <platform> -l
3. Keep making changes to your app
4. Eventually the problem will occur

Which @ionic/app-scripts version are you using? 1.1.4

[EugenRakhimov]

Same issue here. Updated an application, builded a version with ionicPro, and still old content is showing on the phone, even after I deleted version and installed from google again.

[stellah57]

Me too experiencing the same issue. It's so frustrating that I have to go through all previously edited files and press Cmd+s in order to bring the latest version of the files. Sometimes even error on non-existing (already deleted) method shows up. Been diving into ionic for about 2 months now, it's toxic to the bone due to this bug.

[TheAlexPorter]

I'm glad to know I'm not the only one experiencing this. I have 3 other ionic 2/3 apps that I maintain and none of them do this. I started a new project this week from the CLI and it's using Angular 5.2.9 and App Scripts 3.1.8.

I wonder if I try to match what my older versions are set to on the other apps if this will go away?

[weldyss]

The same here. Using a mac to development

. cli packages: (/usr/local/lib/node_modules) @ionic/cli-utils : 1.19.2 ionic (Ionic CLI) : 3.20.0 global packages: cordova (Cordova CLI) : 8.0.0 local packages: @ionic/app-scripts : 3.1.8 Cordova Platforms : none Ionic Framework : ionic-angular 3.9.2 System: ios-deploy : 1.9.2 Node : v9.10.1 npm : 5.6.0 OS : macOS High Sierra Xcode : Xcode 9.3 Build version 9E145 Environment Variables: ANDROID_HOME : not set Misc: backend : pro

[tejon-melero]

I am experiencing the same issue. Is this already accepted as an official bug/issue? It really is a huge issue when developing.

cli packages: (/home/matyas/.nvm/versions/node/v9.3.0/lib/node_modules) @ionic/cli-utils : 1.19.2 ionic (Ionic CLI) : 3.20.0 global packages: cordova (Cordova CLI) : 8.0.0

local packages: @ionic/app-scripts : 3.1.5 Cordova Platforms : none Ionic Framework : ionic-angular 3.9.2

System: Node : v9.3.0 npm : 5.5.1 OS : Linux 4.13

Environment Variables: ANDROID_HOME : not set

Misc: backend : pro

[blaforet]

Hi I have the same issue and it's been frustrating.

The only solutions that i found so far is to use FIREFOX

so far t's been stable and does reload correctly after a save. Just make sure the page is opened only in firefox, if it's open in Chrome they both crash. Open in it Firefox. If Firefox still load an old version then change and save .html from your project then, you should be good to go.

2018-04-18: Unfortunately 24h after, the symptoms are getting worst on Firefox. I was able to do some work. Now look like i have to go change and save one by one every .ts and .html that have been changed after the "cached" version. So this is really time consuming and I'm never sure if there is file(s) that did not reloaded correctly. Not sure if i should continue to use Ionic. It's so frustrating!!!!

There is a serious problem with ionic and cache. Did a few test, I've create a new project with option "super" just to have some pages. I build it browser prod send it to the Google Firebase hosting, so far so good. The PWA load and the pages work just fine. Then did some code change and html change. Build prod again and upload it. It din't mater if I did F5, close and reopen the browser, it was still the previous version. The only way to have the new version was to clear the browser Cache. This is not practical!! If i upload a new version i cannot ask user to go clean then browser cash. I did the same test with an angular 4 project and has soon as i uploaded the new version and did F5 the change was there. So for now IONIC is OUT i can no longer trust it.

with Chrome ionic simply does not reload correctly and even load a VERY OLD Version. Clearing the cache every time is a solution but time consuming. I think i have a recent version of almost everything, do not have this issue with Chrome and Angular project cli packages: (C:\Angular\Ionic\MT-Admin\node_modules) @ionic/cli-utils : 1.19.2 ionic (Ionic CLI) : 3.20.0

global packages: cordova (Cordova CLI) : 8.0.0

local packages: @ionic/app-scripts : 3.1.7-201801172029 Cordova Platforms : android 6.3.0 Ionic Framework : ionic-angular 3.9.2

System: Node : v9.5.0 npm : 5.6.0 OS : Windows 10 Environment Variables: ANDROID_HOME : not set Misc: backend : pro

I Hope it will help some users

[stansongman]

This just started happening to me in Chrome. I have to bring up the developer tools, go to Application, right-click on ionic-cache and select Delete. Then I refresh the window.

[andy008]

Stop / start ionic serve fixes the problem.

Often, just re-saving app.module.ts can trigger a build that fixes the problem - but not always.

This is extremely frustrating and wastes a lot of time! Is there really no fix coming on this guys?

[TheAlexPorter]

I found a solution that worked, maybe this will help some of you here.

Roll back your app scripts to version 1.3.1. Even though it isn't the latest version, everything will still work.

npm uninstall @ionic/app-scripts

npm install --save-dev @ionic/app-scripts@1.3.1

This cleared the issue right away for me. I hope this helps while we wait for the current scripts to be sorted!

[andy008]

@TheAlexPorter Tried your solution, but got an ERR! code ELIFECYCLE, errno 1 installing 1.3.1

[TheAlexPorter]

@andy008 Shoot! I'd hoped it would help. Here are my other dependencies, perhaps that will help? If not, I'd try changing your app scripts version around and see if you find a fix your dependencies version requirements.

"dependencies": { "@ angular/animations": "5.2.9", "@ angular/common": "5.2.9", "@ angular/compiler": "5.2.9", "@ angular/compiler-cli": "5.2.9", "@ angular/core": "5.2.9", "@ angular/forms": "5.2.9", "@ angular/http": "5.2.9", "@ angular/platform-browser": "5.2.9", "@ angular/platform-browser-dynamic": "5.2.9", "@ angular/tsc-wrapped": "^4.4.6", "@ ionic-native/core": "4.6.0", "@ ionic-native/google-analytics": "^4.6.0", "@ ionic-native/in-app-browser": "^4.6.0", "@ ionic-native/screen-orientation": "^4.6.0", "@ ionic-native/splash-screen": "4.6.0", "@ ionic-native/status-bar": "4.6.0", "@ ionic/pro": "1.0.20", "@ ionic/storage": "^2.1.3", "cordova-android": "6.3.0", "cordova-ios": "4.5.4", "cordova-plugin-device": "^2.0.1", "cordova-plugin-google-analytics": "^1.8.3", "cordova-plugin-inappbrowser": "^2.0.2", "cordova-plugin-ionic-keyboard": "^2.0.5", "cordova-plugin-ionic-webview": "^1.1.16", "cordova-plugin-screen-orientation": "^3.0.1", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git", "cordova-plugin-whitelist": "^1.3.3", "cordova-sqlite-storage": "^2.3.0", "es6-promise-plugin": "^4.2.2", "ionic-angular": "3.9.2", "ionicons": "3.0.0", "rxjs": "5.5.8", "sw-toolbox": "3.6.0", "zone.js": "0.8.20" }, "devDependencies": { "@ ionic/app-scripts": "^1.3.1", "typescript": "~2.6.2" }

Edit: Had to add a space between the @ and the package name or else they come in blank.

[stellah57]

Weeks ago I've decided that I had enough on this frustrating issue. I moved away to react and xamarin.. It's much better time investment to learn new stuff rather than chasing around ghostly bugs in my own codes.

On Fri, 20 Apr 2018, 08:48 Alexander Porter, notifications@github.com wrote:

@andy008 https://github.com/andy008 Shoot! I'd hoped it would help. Here are my other dependencies, perhaps that will help? If not, I'd try changing your app scripts version around and see if you find a fix your dependencies version requirements.

"dependencies": { "": "5.2.9", "": "5.2.9", "": "5.2.9", "": "5.2.9", "": "5.2.9", "": "5.2.9", "": "5.2.9", "": "5.2.9", "": "5.2.9", "": "^4.4.6", "": "4.6.0", "": "^4.6.0", "": "^4.6.0", "": "^4.6.0", "": "4.6.0", "": "4.6.0", "": "1.0.20", "": "^2.1.3", "cordova-android": "6.3.0", "cordova-ios": "4.5.4", "cordova-plugin-device": "^2.0.1", "cordova-plugin-google-analytics": "^1.8.3", "cordova-plugin-inappbrowser": "^2.0.2", "cordova-plugin-ionic-keyboard": "^2.0.5", "cordova-plugin-ionic-webview": "^1.1.16", "cordova-plugin-screen-orientation": "^3.0.1", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "git+ https://github.com/apache/cordova-plugin-statusbar.git", "cordova-plugin-whitelist": "^1.3.3", "cordova-sqlite-storage": "^2.3.0", "es6-promise-plugin": "^4.2.2", "ionic-angular": "3.9.2", "ionicons": "3.0.0", "rxjs": "5.5.8", "sw-toolbox": "3.6.0", "zone.js": "0.8.20" }, "devDependencies": { "": "^1.3.1", "typescript": "~2.6.2" },

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-app-scripts/issues/825#issuecomment-382927079, or mute the thread https://github.com/notifications/unsubscribe-auth/AAmlc8igC8Xy0I17m7bgW0pTIoa733EIks5tqTBAgaJpZM4Mhihl .

[m1nka]

I'm getting the same issue. Very frustrating :/

cli packages: (/Users/mjerg/.npm-global/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0 

local packages:

@ionic/app-scripts : 3.1.2
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
Node       : v8.10.0
npm        : 5.6.0 
OS         : macOS High Sierra
Xcode      : Xcode 9.3 Build version 9E145 

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

[scottieslg]

Just throwing my 2 cents in here that I'm seeing this problem as well.

Just today, everything was working, then for some unexplained reason, 2 of my functions suddenly weren't found. I went into the .ts file and re-saved and that worked for one of them. The other one I had to close and re-serve ionic to fix it.

I've had multiple times where my html is stuck on some old version until I re-serve.

Let's get this fixed, yes?

[realtrehan]

I have faced similar issue - is there a config set option to disable cache for all views for development run debugging ?

[AndoniXV]

This is a very frustrating problem for me. Sometimes I can solve it by stopping/starting ionic serve. But other times I can spend like 20-30min deleting cache, stopping ionic serve, deleting the www folder, opening it on firefox, saving all the files 10 times and nothing works... And it can even happen with production builds too.

For me this only happens on Windows. On Mac it works perfectly, I don't have any problem there. I don't really know if I'm missing something or what, but sometimes it can get really frustrating when I'm working on my PC at home.

[realtrehan]

team ionic can you please take a look at this and provide some config switch that can enable no caching for dev/debugging mode . this is really causing a lot of slow down of the dev work using ionic.

[realtrehan]

also has anybody experienced httpclient (angular) throwing stale/cached results when using ionic in debug -lcd mode ? any workaround to always get fresh http get results ?

[Ross-Rawlins]

Any new news on this?

[jcyh0120]

I am facing this problem too.

[ludobit]

Same bug! Every time i refresh my app on the android device I lose some new code wich is reverted to the old one.

[pataar]

Same problem here, pretty annoying.

[geass619]

The issue still exists, I am using a windows machine. Will the problem be solved if used in Firefox !? The ionic team should work on fixing it ASAP or provide a solution, we cannot go on doubting whether the code is working or not on every new line. With no solution, you guys are making us move to another option like react...

[opussan]

Yes, the same problem exists & its very frustrating. It usually gets solved by completely stopping ionic serve and running ionic serve again sometimes its takes several attempts to resolve it. But it again it re-appears after making changes to the files. Wasting lots of time. I was doing my first project on ionic, and still regretting my decision to move to ionic due to various reasons and this is among the primary reason for it.

cli packages: (/usr/local/lib/node_modules)
    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:
    cordova (Cordova CLI) : 8.0.0 

local packages:
    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0 browser 5.0.3 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

[opussan]

This problem is driving me nuts. It throws random errors for no reason, that gets fixed upon stopping and serving again.

For example I get the the following error, randomly. Sometimes some other errors. TypeError: __WEBPACK_IMPORTED_MODULE_6__ionic_storage__.a.forRoot is not a function at http://localhost:8100/build/main.js:1475:92 at Object.498 (http://localhost:8100/build/main.js:1511:2) at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30) at Object.493 (http://localhost:8100/build/main.js:1370:70) at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30) at webpackJsonpCallback (http://localhost:8100/build/vendor.js:26:23) at http://localhost:8100/build/main.js:1:1

[vjoao]

Same problem. This has a huge impact on productivity.

[pdescham49]

If this is the same issue I think it is..

The work around is to specify a new port and restart. --port=8888

Paul.

On Wed, Jun 6, 2018 at 10:41 AM, Victor Nascimento <notifications@github.com

wrote:

Same problem. This has a huge impact on productivity.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-app-scripts/issues/825#issuecomment-395093196, or mute the thread https://github.com/notifications/unsubscribe-auth/AAZxiD48U700c_mRWs3Ka_Y_oweut0Yrks5t5-oTgaJpZM4Mhihl .

[RaschidJFR]

The work around is to specify a new port and restart. --port=8888

@pdescham49 So you do this each time or just doing it once fixes the problem?

[pdescham49]

When I notice the content is cached.. I'll stop it restart it on a new port and it will work again.. sometimes for days, sometimes for hours.

On Wed, Jun 6, 2018 at 12:05 PM, Raschid J.F. Rafeally < notifications@github.com> wrote:

The work around is to specify a new port and restart. --port=8888

@pdescham49 https://github.com/pdescham49 So you do this each time or just doing it once fixes the problem?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-app-scripts/issues/825#issuecomment-395123777, or mute the thread https://github.com/notifications/unsubscribe-auth/AAZxiCaoO39dClZ1L0U8MZMvIxpb9nn4ks5t5_3agaJpZM4Mhihl .

[RaschidJFR]

Ok so it's basically the same :( What I do is stop, delete folder www and restart.

[pdescham49]

In my experience you don't even need to delete the www folder. But yes that will do as well.

On Wed, Jun 6, 2018 at 12:10 PM, Raschid J.F. Rafeally < notifications@github.com> wrote:

Ok so it's basically the same :( What I do is stop, delete folder www and restart.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-app-scripts/issues/825#issuecomment-395125293, or mute the thread https://github.com/notifications/unsubscribe-auth/AAZxiPhbDah9fKx3eVD3SyzQFfYkcT84ks5t5_7wgaJpZM4Mhihl .

[eduardo-mattos]

Same problem here.

1-Ionic serve 2-Make some syntax error like instead of 3-See error response 4-Fix syntax error 5-Change something unrelated to previous error, eg. updating a .json file 6-Error response from step 3 repeats.

[vjoao]

Solved it: I don't use Ionic anymore.

[tejon-melero]

It might be helpful to post to this issue thread as well (since this bug is officially closed). It is the same issue that was reopened again https://github.com/ionic-team/ionic-app-scripts/issues/1432 one possible workaround seems to be changing the service worker settings in the chrome developer settings: https://grzegorowski.com/ionic-framework-live-reloading/

[contactvaibhavi]

I experienced the same issue, it keeps building the last 3rd iteration.

Is running ionic-serve the only work around for this?

[clemishow]

I need to reload the server every time...

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2
    ios-sim           : 6.1.2
    Node              : v8.10.0
    npm               : 5.6.0
    OS                : macOS High Sierra
    Xcode             : Xcode 9.4 Build version 9F1027a

Environment Variables:

    ANDROID_HOME : /Users/dev/Library/Android/sdk

Misc:

    backend : pro

[matheusdavidson]

upgrade to ionic 4 if you can, the problem will go away as you won't be using ionic-app-scripts =]

[airstep]

So, anyone can handle browser to clear cache? It is usefull if there is new version of the app bumped but older content still present...

[m--c]

I have found that in my case, this happens when I use a templateUrl to an html which is in another folder. for instance, inwelcome.ts, I used templateUrl: '../pages/menu/menu.html' If i refer to the real welcome.ts, it does incliiude the changes. It seems to have something to do with not realizing that other file is in the project structure

[psimondk]

Just upgraded to ionic4 and created a sidemenu app - same problem. Only solution is to manually clear the cache in chrome and reload ... arghhh 👎 👎 👎

[psimondk]

Solved - just use Opera - tt works 👍

[finzaiko]

Its Ok I just re-run ionic serve --no-open resolved me for while

[edgarfroes]

If you're using custom webpack.config (as i were), following these steps worked for me:

https://github.com/gshigeto/ionic-environment-variables

I just recreated my whole webpack.config based on this tutorial, and it worked fine and sweet.

EDIT

Actually, i started having it again. Then i noticed livereload suddenly started to work when i update my custom webpack file, and served the app again. Somehow, this are being cached. Updating webpack file (like putting a empty line behind everything) worked for me.

Also, Chrome will just send us back in time, but Safari will show errors.

[edgarfroes]

UPDATE

Using anonymous window on Chrome seems to be the easiest way to work. Problem still exists on Ionic 3.9.2

[ptrahan]

@EdgarSalazar Thanks! Been pulling my hair. To me the best compromise for this bug is: ionic serve --no-open And in chrome use an incognito window and open the url to your app. Live changes you make are seen as you would expect, did not need to clear cache or restart ionic serve.

I had abandoned Ionic last year after 6 months of time wasting on numerous issues. I come back a year later, giving another chance to this framework, but I'm already starting to regret...

[sfearl1]

For those coming here having issues w/ Ionic 3+ and iOS/Android build showing old views...

This was happening when I would build/run for iOS and Android. My latest code would show up on first load and each subsequent load (after killing the app) on both platforms would show old component views. I updated all npm/ionic/cordova packages, plugins, cli + confirmed all updates, cleared all cache that I could find, removed all build and plugin folders, rebuilt everything and still had no luck.

I finally had to go in to Ionic Dashboard > Personal Apps and delete my Ionic Pro link/app. I'm not sure how my builds were accessing my old code via Ionic Pro during the build phase, but deleting the link/app appears to have fixed the problem for me.

FWIW, I think I could've fixed the problem without deleting the Pro link by pushing each build to the Channel/branch that was connected to my Ionic Pro repo. Maybe one of the Ionic guys can confirm this.

[davemake]

I deleted Pro and problem persists