New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Ionic serve showing old content #825

Closed
ihadeed opened this Issue Mar 18, 2017 · 96 comments

Comments

Projects
None yet
@ihadeed
Copy link
Member

ihadeed commented Mar 18, 2017

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

This comment has been minimized.

Copy link

duydao commented Mar 19, 2017

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

@rhartvig

This comment has been minimized.

Copy link

rhartvig commented Mar 20, 2017

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

This comment has been minimized.

Copy link

yuricamara commented Mar 21, 2017

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.

@ihadeed ihadeed changed the title Possible bug: Ionic serve showing old content Bug: Ionic serve showing old content Mar 21, 2017

@Charlie-Hua

This comment has been minimized.

Copy link

Charlie-Hua commented Mar 22, 2017

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

@duydao

This comment has been minimized.

Copy link

duydao commented Mar 22, 2017

@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

This comment has been minimized.

Copy link

artiomkichojal commented Mar 22, 2017

same issue

@danbucholtz

This comment has been minimized.

Copy link
Contributor

danbucholtz commented Mar 24, 2017

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

Thanks,
Dan

@ihadeed

This comment has been minimized.

Copy link
Member

ihadeed commented Mar 24, 2017

Thanks @danbucholtz !

@brettdorrans

This comment has been minimized.

Copy link

brettdorrans commented Mar 24, 2017

@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

This comment has been minimized.

Copy link

yuricamara commented Mar 24, 2017

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

@brettdorrans

This comment has been minimized.

Copy link

brettdorrans commented Mar 24, 2017

@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

This comment has been minimized.

Copy link
Member

ihadeed commented Mar 24, 2017

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

@danbucholtz

This comment has been minimized.

Copy link
Contributor

danbucholtz commented Mar 24, 2017

@brettdorrans,

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

Thanks,
Dan

@brettdorrans

This comment has been minimized.

Copy link

brettdorrans commented Mar 29, 2017

@danbucholtz

This issue persists in 1.2.2

@danbucholtz

This comment has been minimized.

Copy link
Contributor

danbucholtz commented Mar 30, 2017

@brettdorrans,

How can I reproduce it?

Thanks,
Dan

@brettdorrans

This comment has been minimized.

Copy link

brettdorrans commented Mar 30, 2017

@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

This comment has been minimized.

Copy link

brettdorrans commented Mar 30, 2017

@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

This comment has been minimized.

Copy link

netcinematics commented Oct 9, 2017

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-

This comment has been minimized.

Copy link

reaVen- commented Oct 11, 2017

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

This comment has been minimized.

Copy link

vgb1993 commented Oct 22, 2017

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

This comment has been minimized.

Copy link

tobbbe commented Oct 27, 2017

For me this only happens on Mac. Not windows.

@ihadeed

This comment has been minimized.

Copy link
Member

ihadeed commented Oct 28, 2017

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

This comment has been minimized.

Copy link

alvarocasta commented Nov 13, 2017

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

This comment has been minimized.

Copy link

brugh commented Nov 13, 2017

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

This comment has been minimized.

Copy link

tobbbe commented Nov 13, 2017

Yep happens om both Windows and Mac for me now

@zen4raul

This comment has been minimized.

Copy link

zen4raul commented May 8, 2018

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

This comment has been minimized.

Copy link

Ross-Rawlins commented May 8, 2018

Any new news on this?

@jcyh0120

This comment has been minimized.

Copy link

jcyh0120 commented May 9, 2018

I am facing this problem too.

@ludobit

This comment has been minimized.

Copy link

ludobit commented May 14, 2018

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

@pataar

This comment has been minimized.

Copy link

pataar commented May 23, 2018

Same problem here, pretty annoying.

@geass619

This comment has been minimized.

Copy link

geass619 commented May 28, 2018

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...

@santhoshopus

This comment has been minimized.

Copy link

santhoshopus commented May 30, 2018

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
@santhoshopus

This comment has been minimized.

Copy link

santhoshopus commented Jun 5, 2018

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

This comment has been minimized.

Copy link

vjoao commented Jun 6, 2018

Same problem. This has a huge impact on productivity.

@pdescham49

This comment has been minimized.

Copy link

pdescham49 commented Jun 6, 2018

@RaschidGithub

This comment has been minimized.

Copy link

RaschidGithub commented Jun 6, 2018

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

This comment has been minimized.

Copy link

pdescham49 commented Jun 6, 2018

@RaschidGithub

This comment has been minimized.

Copy link

RaschidGithub commented Jun 6, 2018

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

@pdescham49

This comment has been minimized.

Copy link

pdescham49 commented Jun 6, 2018

@eduardo-mattos

This comment has been minimized.

Copy link

eduardo-mattos commented Jun 9, 2018

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

This comment has been minimized.

Copy link

vjoao commented Jun 9, 2018

Solved it: I don't use Ionic anymore.

@tejon-melero

This comment has been minimized.

Copy link

tejon-melero commented Jun 11, 2018

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/

@Vaibhavi24

This comment has been minimized.

Copy link

Vaibhavi24 commented Jun 13, 2018

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

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

@clemishow

This comment has been minimized.

Copy link

clemishow commented Jun 13, 2018

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

This comment has been minimized.

Copy link

matheusdavidson commented Jun 15, 2018

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

@airstep

This comment has been minimized.

Copy link

airstep commented Jun 18, 2018

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

This comment has been minimized.

Copy link

m--c commented Jun 21, 2018

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

This comment has been minimized.

Copy link

psimondk commented Aug 2, 2018

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

This comment has been minimized.

Copy link

psimondk commented Aug 2, 2018

Solved - just use Opera - tt works 👍

@finzaiko

This comment has been minimized.

Copy link

finzaiko commented Aug 8, 2018

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

@EdgarSalazar

This comment has been minimized.

Copy link

EdgarSalazar commented Aug 13, 2018

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.

@EdgarSalazar

This comment has been minimized.

Copy link

EdgarSalazar commented Aug 15, 2018

UPDATE

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

@ptrahan

This comment has been minimized.

Copy link

ptrahan commented Aug 18, 2018

@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

This comment has been minimized.

Copy link

sfearl1 commented Sep 10, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment