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

[duydao]

any chance you're using a custom webpack config file?

[rhartvig]

We are seeing the exact same thing. Typically:

1. Ionic serve
2. Make some syntax error like <buitton> instead of <button>
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.

It does not seem to be browser caching, as cache reset / browser switch does not change this. The only way to workaround issue is to stop and rerun ionic serve.

We do not have local changes to webpack.

Ionic version 2.2.1. Package.json:

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/cloud-angular": "^0.11.0",
    "@ionic/storage": "2.0.0",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "lsb: An Ionic project"
}

[yuricamara]

I have exactly the same problem which @ihadeed described and I tried the same things

'Ionic serve' worked fine and suddenly this started to happen.

[Charlie-Hua]

Hi @duydao
I am using an extra webpack config file to set environment configs.
Does that matter?
thanks.

[duydao]

@Charlie-Hua ionic uses filename from the webpack config to update the file on changes.

Ionic supports multiple entry points in our custom webpack.config.js:

  entry: {
    worker: workersDir + 'worker.ts',
    main: process.env.IONIC_APP_ENTRY_POINT
  },

but if we're trying to use a dynamic filename config, it won't update the bundle in ionic serve:

  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: '[name].js',
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },

We can get around this fact by inlining the workers instead of generating separate files.

[artiomkichojal]

same issue

[danbucholtz]

This is fixed in nightly, will be available in 1.2.0 next week. npm install @ionic/app-scripts@nightly.

Thanks,
Dan

[ihadeed]

Thanks @danbucholtz !

[brettdorrans]

@danbucholtz

This does not appear to be fixed after installing app-scripts@nightly for me. Same issue as before - old content is served, sometimes very old content (from several revisions ago).

Edit: Doh, ran the install command in the wrong terminal!

[yuricamara]

Thanks! Should we update to @ionic/app-scripts@nightly or wait for next week release, @danbucholtz ?

[brettdorrans]

@danbucholtz

So this bug is fixed in @nightly but it has introduced a new one, where sometimes SASS compilation fails completely and the app after rebuild displays without any style at all until a SASS file is saved again.

[ihadeed]

@brettdorrans you should open a new issue for that. I can confirm it's a bug.

[danbucholtz]

@brettdorrans,

Fixed in 1.2.0. I was aware of the issue, it was on my todo list.

Thanks,
Dan

[brettdorrans]

@danbucholtz

This issue persists in 1.2.2

[danbucholtz]

@brettdorrans,

How can I reproduce it?

Thanks,
Dan

[brettdorrans]

@danbucholtz

Isn't easily reproducible. Seems to get worse with increasing app complexity (i.e. as you begin editing more pages/scss the effect is more noticeable).

The steps to produce on my setup are:

1. Run ionic serve
2. Make change in Page1's markup and save (change is then reflected after reload)
3. Make change in Page1's scss and save (change is reflected after reload)
4. Make change in Page1's markup again, after reload displays markup as if change made in steps 2 and 3 did not occur.

Downgrading to 1.1.4 fixes the issue.

[brettdorrans]

@danbucholtz

Have narrowed it down to this:

I am using a custom ionic:serve in package.json so I can serve cordova in the browser.

"ionic:serve": "ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build",

This fails to update properly on save because ionic-app-scripts isn't running ionic build for the browser platform (perhaps it did this in an earlier version?)

I'm unable to use the standard ionic serve because it causes cordova related errors throughout the application.

[netcinematics]

Having same problem, I've noticed that I can save a blank space to the file that is cached to force it back into the build....

[reaVen-]

Same problem here. Even if i restart ionic serve an old version of the page shows up

Actually i found out that, when i run "ionic serve" two node processes shows up, one takes about 30mb and the other 700mb. If i go to "localhost:8100" my old page shows up, i dont even know where those files are cached because this is from a newly cloned project. However if i go to "192.168.10.101:8100" which is my local ip, my updated project shows up.

[vgb1993]

Same problem here, suddently a bug appears because Ionic it's serving a old version of a file. I have to go to the file where de error is present, press save and sometimes it's gone. This has begin happening quite often since the last CLI update. It's becoming very annoying to be honest. Some times I have to save around 4 different files to somehow get the latest version of the document.

Ionic Framework: 3.7.1
Ionic App Scripts: 3.0.0
Angular Core: 4.4.3
Angular Compiler CLI: 4.4.3
Node: 6.11.1
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

[tobbbe]

For me this only happens on Mac. Not windows.

[ihadeed]

I can confirm that this issue occurs on both Mac and Windows. I can tell it's happening when things stop making sense 😄 (I edit views/typescript and start seeing reverse progress).

The solution that works 100% of the time is to clear cache & restart ionic serve.

[alvarocasta]

same issue here. Exactly as described on main post.

@ionic/cli-utils : 1.18.0
ionic (Ionic CLI) : 3.18.0
cordova (Cordova CLI) : 7.0.1
@ionic/app-scripts : 3.0.1
Cordova Platforms : android 6.3.0 ios 4.5.2
Ionic Framework : ionic-angular 3.8.0
ios-deploy : 1.9.1
ios-sim : 5.0.6
Node : v6.10.3
npm : 5.5.1
OS : macOS Sierra
Xcode : Xcode 9.1 Build version 9B55

[brugh]

I have the same issue. running on Linux UB16.04LTS:
ionic -v
3.18.0
cordova -v
7.1.0
npm -v
5.4.2
node -v
v6.10.2

[tobbbe]

Yep happens om both Windows and Mac for me now

[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 ***@***.*** > 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 <#825 (comment)>, 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 < ***@***.***> 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 <#825 (comment)>, 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 < ***@***.***> 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 <#825 (comment)>, 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
#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, in welcome.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