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

[pdescham49]

WOW.. This is crazy.

So I was making a provider "UserData" and decided to revert the file back to my old provider "AuthData"

Now on compile I get this:

Runtime Error Can't resolve all parameters for UserData: ([object Object], [object Object], ?). Stack

Error: Can't resolve all parameters for UserData: ([object Object], [object Object], ?).
    at syntaxError (http://localhost:8100/build/main.js:80215:34)
    at CompileMetadataResolver._getDependenciesMetadata (http://localhost:8100/build/main.js:93552:35)
    at CompileMetadataResolver._getTypeMetadata (http://localhost:8100/build/main.js:93420:26)
    at CompileMetadataResolver._getInjectableMetadata (http://localhost:8100/build/main.js:93406:21)
    at CompileMetadataResolver.getProviderMetadata (http://localhost:8100/build/main.js:93696:40)
    at http://localhost:8100/build/main.js:93625:49
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (http://localhost:8100/build/main.js:93586:19)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/main.js:93241:50)
    at JitCompiler._loadModules (http://localhost:8100/build/main.js:104305:66)

If I open up 'http://localhost:8100/build/main.js' I can see the reference.

    function UserData(events, storage, af) {
        this.events = events;
        this.storage = storage;
        this.af = af;
        this.HAS_LOGGED_IN = 'hasLoggedIn';
        this.fireAuth = __WEBPACK_IMPORTED_MODULE_4_firebase___default.a.auth();
    }

If I do a recursive search in my /src folder for "UserData" I get zero results.

I've since deleted the 'www/build' folder and then started 'ionic server' again and this UserData Method still getting packed in webpack.. Even though it's nowhere to be found in /src/

Where is this coming from? I suspect the webpack has a cache or something?

ionic -v 3.18.0

cordova -v 7.1.0

npm -v 3.10.10

node -v v7.2.1

[pdescham49]

Soooooooo It appears that the source of the issue was in the Chrome APP CACHE. / Cache Storage. (under application) tab.

[tobbbe]

You've found a solution?

[alvarocasta]

Somehow the port 8100 seems corrupt on my case. I just run "ionic serve --port 8101" and this cache problem seems to be gone. Not sure if this comes from Chrome or Webpack, so if someone finds out, please share.

[pdescham49]

@tobbbe I went into chrome debugger and clicked on the "application" tab and then click on the "clear storage" button. Might as well clear browser history as well. and restart the browser.

Changing the port would also fix the issue since the cache is based on the url. ;) @alvarocasta

[chris08002]

Are you using service workers (PWA)? Just faced the issue that ionic serve does rebuild on every code change but the app doesn't change. After deleting all application cache and it worked.

This gave me the right hint: https://stackoverflow.com/questions/42372872/ionic-serve-loading-wrong-app

[alexboisselle-rd]

This is absolutely not fixed. Using latest and still getting this issue.

[tekkenking]

Still having the same issue here..

[matheusdavidson]

This still happens with latest version. This is an old issue, i remember to have this since the first time i used ionic 2.

[ZacharyCody]

Bug is still apparent

[tobinbc]

Definitely still a problem, but as mentioned, often adding a space to one of the 'wrong' files and saving will bring it back to life.

[LeedsCode]

This is a huge pain. I experience the same thing others have stated here. Why is the issue closed?

[jrobber]

This issue is still present as is affecting deployment.

Build an APK following the steps here : https://ionicframework.com/docs/intro/deploying/. Push it to the google play console and start an alpha build.
Load the app through the alpha build on a fresh device. Force kill and reload the app a few times. Within 10 tries we're seeing an old menu path that was removed 8 builds and 2 months ago. It's completely mind-boggling how code that has been deleted from git 2 months ago shows up in the latest build, sometimes, after killing the app a few times.

[gual]

Experiencing what @JRobber states.

[ndcunningham]

Having the same problem as OP

Can this be reopened i don't think the issue is closed.

[tunde-dovenet]

Experiencing same issue as @JRobber. There was no issue when working with ionic serve. The issue started after deploying to Google play store

[cptflammin]

Same problem happing, ionic serve do the job but content doesn't get refreshed. Closing and opening chrome, even in in incognito mode, does not change anything. Need to rerun ionic serve then re-open browser in incognito mode then I get content updated. Previously this refresh problem was solved by working in incognito mode, but know it does not do the trick anymore :/

[valdoryu]

modules[moduleId] is undefined bug loading chunk 3 failed bug Old content not refreshed bug

Developping with Ionic is toxic to mental sanity

[tunde-dovenet]

I found out that while developing the app, I uploaded my app to Ionic Pro about 2 months ago. I did not update it

When I published the app to app store, the old copy in ionic Pro update the newer version.

What I did to resolve this issue is to delete everything in my Ionic Pro and republish the app. On 9 Feb 2018 14:44, "Valdo Ghafoor" notifications@github.com wrote:

Developping with Ionic is a pain with that bug. Just imagine that we have to refresh around 200 times an hour ... Please fix this

— 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-364437032, or mute the thread https://github.com/notifications/unsubscribe-auth/AK3SN9YoCXk8ZnZ5WwUp3gDuu3DkEXlHks5tTEuhgaJpZM4Mhihl .

[matheusdavidson]

The problem is worse when you use multiple components in one page, in my case everything is lazy loaded, even components(through ComponentsModule).

[edisonmatoso]

Same issue here, and my problem is similar to @matheusdavidson.

Ionic v3.9.2 Ionic Scripts v3.1.8 Angular v5.0.3 Node v8.9.3 win10

[andy008]

Same issue here. A build will fail with an old error in Chrome. Hit Localhost in Firefox and it works. Constantly resolving with a mix of cache clearing and occasional restart of ionic serve. Very frustrating through as I find myself often chasing non-existent bugs.

[jcarloTA]

Same issue here. I have to return to my files and save them again to see the changes.

[toffebjorkskog]

Same here. If i for instance edit a components template file, i first need to save it, then it's .ts file, then components.module.ts and lastly app.components.ts in order for the change to be visible in the app. Can it be related to lazy loading of pages.

[russgalloway]

ionic: 3.20.0 cordova: 8.0.0 npm: 5.5.1 node: 8.9.0 ios-sim: 5.0.6 ios platform: 4.5.4 os: macOS Sierra 10.12.6

I've been experiencing the same ever since I started working with Ionic heavily a month or so ago.

For instance, I'll create a function in a component and reference it in the template as a button click handler. Later I might rename the function in the component and update the template reference.

After several template/component changes I'll make an innocuous change to the template (i.e. fix a spelling mistake in a span) and it'll throw an error stating that the old click handler function name doesn't exist in the template's component source.

Most of the time I can resolve it by adding/removing a space in the template's component source and save the file forcing another build cycle. When that stops working I have to stop and re-run ionic cordova emulate ios --target="iPad-Air-2, 10.1" --livereload -- which happens several times a day.

Since I've seen it mentioned above -- I do have a 'custom' webpack config in order to work around a nodejs vs browser issue with TypeORM (https://github.com/typeorm/ionic-example). I don't think this is relevant to this (build cache?) issue because I experienced this issue when I was developing the UI in Chrome -- before including TypeORM and switching to the iOS simulator.

Something maybe worth noting -- I've developed a few Angular 5 apps recently, which I assume uses a similar development / live reload node server / process and haven't experienced anything like this.

Hope this helps.