Ionic-app-scripts: Attribute changes in templates not reflecting when using live reloading

[jgw96]

_From @aplimovil on March 3, 2017 21:45_

Ionic version:
[x] 2.x

I'm submitting a ...
[x] bug report

Current behavior:
When I make a change to an attribute of an element in a template (.html file of a page) using live reloading, the app refreshes and the live reloading is triggered, but when I check the updated page template in the app, the changes are not reflected, almost as if the attributes of the elements of the template are being cached.

Note that if other aspects of the template like structure or added/removed elements do work correctly, it's only attribute changes that aren't being reflected with live reloading.

If I terminate the "ionic serve" process and run it again, then the template is now updated correctly with the attribute changes.

This started happening after I upgraded to the 2.0.1 release from the 2.0.0 version. I just updated to 2.1.0 to check if the bug was fixed but it's not, it's still hapenning.

Expected behavior:
All template changes should be reflected immediately on live reloading.

Steps to reproduce:
Run "ionic serve" with live reloading, make a change to a template, wait for the app to reload (on browser or device), and the change will not be reflected.

Here's a link to a screencast I recorded showing the problem, where I update a template by adding a padding attribute to 2 DIVs so they have padding, but after live reloading no padding is added:
http://quick.as/0vnVcvx16

Ionic info:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: OS X Mavericks
Node Version: v6.2.0
Xcode version: Xcode 6.2 Build version 6C131e

_Copied from original issue: driftyco/ionic#10640_

[AbrahamLopez10]

To clarify, this is seems to be happening with all template changes in general, not just attributes.

And I just updated to the latest 1.1.4 version of ionic-app-scripts and this annoying issue is still hapenning.

So at the current state live reloading is 50% useless, as I've to quit ionic serve and run it again from scratch every time I make a template change :(

[shawnlan]

I'm running on Mac/Chrome with ionic-app-scripts 1.1.4. I can confirm the issue as the following:

The changes will show only right after the html templates are modified. If you modify some ts files afterwards, the template changes are gone. So weird.

[yuricamara]

Same here!
Maybe related to #825

[peterpeterparker]

Same here reported on the forum and noticed by a couple of users.

https://forum.ionicframework.com/t/weird-stuffs-with-rebuild

[AbrahamLopez10]

Any news on this guys? This issue is still happening and is slowing down and complicating development to several people now :(

[brettdorrans]

+1

This is happening on 1.1.4 (have not tested other versions).

Is very inconsistent - sometimes it will rebuild using old versions of components, even though the previous build used the latest one!

e.g. if I make a change in File1 and save, this will usually be reflected in the rebuild, but if I then make a change in File2 and save, the changes in File2 will display but an old version of File1 will be included in this build.

This is a very strange issue!

[rashnk]

@brettatoms , same issue here, i love to work with awesome framework - ionic. but this makes development harder, i hope the ionic team will take care of this soon.

[pimol]

Me too; Windows 10.1

S:\IonicProject>ionic info

Your system information:

 ordova CLI: 6.5.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.2
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.1
Xcode version: Not installed

[pimol]

And more: if I change work directory to test a new project, ionic lab continues to start the old project...

[brettdorrans]

Issue still present in 1.2.2 and 1.2.2-201703281515 (nightly) - reported in #859

Seems to be related to #825

[okonon]

@jgw96 any update on this issue?
I am running in to same issue.

my setup:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.5
Xcode version: Xcode 8.2.1 Build version 8C1002

[danbucholtz]

This should be fixed in 1.3.1.

Thanks,
Dan

[brettatoms]

@danbucholtz The refreshing happens when a template changes but about half the time I still get the old page after the refresh.

[danbucholtz]

How can I recreate?

Thanks,
Dan

[shawnlan]

@danbucholtz @brettatoms

Just tested 1.3.1. Looks like it's fixed. Thanks!

[rashnk]

@danbucholtz just for clarification, when app running with ionic serve, if i ctr+s multiple files one by one in editor, will appscript build take all files change or just the first one only?, iam asking this because sometime the file changes not reflected on browser output, appscript start buiding as soon as first file change is detected,

[danbucholtz]

It should queue up the build and wait until the build is over before starting to process the next change.

Thanks,
Dan

[craigrouse]

@danbucholtz I'm having an absolute nightmare trying to test my ionic app. It was working just fine, but after updating Ionic and a few of my npm dependencies, I simply cannot get Ionic to serve the latest version of my main.js file. When I save my typescript files, if I run ionic lab, I can see that the relevant processes run and the UI reloads in the browser. However, my main.js file is showing really old versions of the file. I can't figure out for the life of me how this is happening, and I can't find out how to force the "cache" to clear so I can test again. The files in the "www" dir in my ionic app's root dir reflects my changes, but when served using ionic lab or ionic serve --lab, old versions of the main.js are served. Help! I'm at my wits' end.

Here's my ionic info output:

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.6
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.9.0
Xcode version: Xcode 8.3.2 Build version 8E2002
Thanks!

[craigrouse]

@danbucholtz please ignore my comment. I didn't realise I had the service worker enabled. Perhaps a comment in the default index.html would be good "only uncomment if you know what you're doing!!!"

Thanks anyway.

Craig.

[trumbitta]

@danbucholtz I'm experiencing this issue with 1.3.7, running emulate or run with ios platform.
Didn't have the chance to test serve, yet.

Edit: my ionic info

$ ionic info

global packages:

    @ionic/cli-utils : 1.2.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.2.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.2.1
    @ionic/cli-plugin-ionic-angular : 1.2.0
    Cordova Platforms               : ios 4.4.0
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v6.9.1
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002
    ios-deploy : 1.9.1
    ios-sim    : not installed

Edit 2: my service worker is commented

[akaztp]

I have this problem every 5 min.
Working on the same project for months, this was rare at first but increased a lot in the last 3 or 4 weeks.
Did an upgrade of all ionic, angular and tools to latest versions a few days ago.
Still the same. Previous version of the HTML is served with live-reloading on a "ionic serve" server.
Re-saving the file is sometimes successful but not always. Then only relaunching the server, cuts it.

global packages:

    @ionic/cli-utils : 1.3.0
    Cordova CLI      :  You have been opted out of telemetry. To change this, run: cordova telemetry on. 7.0.1
    Ionic CLI        : 3.3.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.3.0
    Cordova Platforms               : You have been opted out of telemetry. To change this, run: cordova telemetry on.  browser 4.1.0
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.8.0
    OS         : Linux 4.4
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

[trumbitta]

Can this be reopened?

[jordins]

I'm having the same problem with ionic serve after updating to latest ionic (3.3.0).
When modifying a subcomponent html file the page gets cached.
It does not happen when modifying a parent component html file or a typescript file.

Thanks!

global packages:

    @ionic/cli-utils : 1.3.0
    Cordova CLI      : 6.5.0
    Ionic CLI        : 3.3.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.3.0
    Cordova Platforms               : browser 4.1.0 ios 4.3.1
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.7.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 5.0.13

[craigrouse]

@jordins just checking... is the service worker code in index.html commented out? If not, this will probably be the culprit.

[jordins]

@craigrouse yes, it's commented.

[setheredge1105]

me too

`global packages:

@ionic/cli-plugin-proxy : 1.2.0
@ionic/cli-utils        : 1.3.0
Cordova CLI             : 6.4.0
Ionic CLI               : 3.3.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : none
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v6.9.1
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
ios-sim    : 5.0.13`

[rashnk]

you always have to wait to finish transpile process to save the next file

[trumbitta]

@rashnk yes, of course, but the problem still stands :)

[JanMesaric]

Can confirm, still not working.

[ngSunil]

reverting back to ionic app [email protected] seems to have worked for me right now.. any new updates??

[danbucholtz]

How can I recreate this? Happy to fix, but I haven't seen this in my testing. Please provide detailed instructions so we're all on the same page.

Thanks,
Dan

[rashnk]

@danbucholtz @ngSunil @JanMesaric @trumbitta

example : run ionic serve -l -r and do changes in project files. u have 3 unsaved files, just press ctrl+s,now the file is saved and ready for transpile,transpile has started immediately. now u ctrl+s in other 2 files before build complete, but that change will not reflect in browser, because the appscript stared process just after saving first file.. this is one example of problem i can provide this time, im not sure others having the same..
if ionic team can solve this issue, it will be appreciatd.. thnks

[trumbitta]

@danbucholtz @rashnk @ngSunil @JanMesaric my issue is actually "simpler" than @rashnk 's.

• run ionic serve -l
• have a component, edit its template and save

You'll see webpack compiling as expected, you'll see the familiar "building..." toast, you'll see the page reloading once everything is done. But the template will be the old one.

• now save something inside the .ts file of the component

Everything will go as expected, and also the template will show the changes.

Edit: I didn't look for different behaviours with or without the chrome devtools open (it can make a difference with some bugs, given it can do things to caches and so on)

[danbucholtz]

Can you recreate it without the args to ionic serve? I wonder if that is part of the issue. Seems like a stretch but I'm not sure.

We should queue the builds up, so nothing should actually happen in terms of a race condition with the second build happening concurrently with the first one. Can you add some console.log statements in this block of code and verify that it's queueing correctly?

https://github.com/ionic-team/ionic-app-scripts/blob/master/src/watch.ts#L184-L258

I have never been able to recreate this. The crummy thing is I don't think this happens to most users or we'd hear about it a lot more. There are hundreds of thousands of people using Ionic at this time.

Thanks,
Dan

[aslaugsollilja]

@danbucholtz I'm using ionic serve without arg. Every time I make changes and save, the changes aren't reflecting in the browser. The same goes for ionic lab. I even remade my app from scratch using --v3 blank template but still the same problem.

[danbucholtz]

How are you doing that? What is your OS? What is your node version? Does it happen every time? How do I recreate?

Thanks,
Dan

[aslaugsollilja]

Node : v7.9.0
OS : macOS Sierra
I created a ionic blank app from scratch. The same thing. I served it up with ionic serve and whenever I made changes it didn't work. However when I changed the port ionic serve -p 9100 it worked. I could see my changes instantly. So I went back to my original app and change the port there, but that didn't work. Same problem, if I make changes they don't show up unless I do command+shift+r or unregister from the service worker. But I have to do it every time I change something. However it seems like when I make changes in the scss file those changes come through, but not html or ts...

[akaztp]

I've got a similar problem for months traversing several versions of ionic.

It is similar because it appears not only when changing attributes, but anything goes. The other difference is that it is random, or so it seems.

In fact see below what several consequent saves of the same (and only) html file produces on the build:

[16:32:39]  build started ...
[16:32:39]  transpile started ...
[16:32:44]  transpile finished in 5.47 s
[16:32:44]  deeplinks update started ...
[16:32:44]  deeplinks update finished in 205 ms
[16:32:44]  webpack update started ...
[16:32:51]  webpack update finished in 6.85 s
[16:32:51]  build finished in 12.55 s

[16:33:43]  build started ...
[16:33:43]  template update started ...
[16:33:43]  template update finished in 98 ms
[16:33:43]  deeplinks update started ...
[16:33:43]  deeplinks update finished in 448 ms
[16:33:43]  build finished in 573 ms

[16:34:03]  build started ...
[16:34:03]  transpile started ...
[16:34:09]  transpile finished in 5.89 s
[16:34:09]  deeplinks update started ...
[16:34:09]  deeplinks update finished in 192 ms
[16:34:09]  webpack update started ...
[16:34:12]  webpack update finished in 3.04 s
[16:34:12]  build finished in 9.14 s

All builds triggered the auto-reload on the browser, but the build in the middle did not reflect the changes I've made to the html file. Simply re-saving it (which produced the third build above) showed the changes.

FYI: the script snippet about the serviceWorker in index.html has always been disabled in my case.

The problem is the same with @ionic/app-scripts V1.3.12.

System info (Linux subsystem on Windows 10):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      :  You have been opted out of telemetry. To change this, run: cordova telemetry on. 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.3.0
    Cordova Platforms               : You have been opted out of telemetry. To change this, run: cordova telemetry on.  browser 4.1.0
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.8.0
    OS         : Linux 4.4
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 4.6.1

[akaztp]

Following my latest post, I've just saved a small change in a HTML file which triggered:

[11:20:30]  build started ...
[11:20:30]  template update started ...
[11:20:30]  template update finished in 89 ms
[11:20:30]  build finished in 154 ms

Browser detected the rebuild but the change I've made was not reflected on the page.

After that, just re-saving the file, triggered this build:

[11:21:22]  build started ...
[11:21:22]  transpile started ...
[11:21:30]  transpile finished in 8.27 s
[11:21:30]  deeplinks update started ...
[11:21:30]  deeplinks update finished in 164 ms
[11:21:30]  webpack update started ...
[11:21:46]  webpack update finished in 15.73 s
[11:21:46]  build finished in 24.26 s

which produced the desired change in the browser.

[aslaugsollilja]

Any update on this? Or am I the only one still having this problem?

[akaztp]

You're not @aslaugsollilja...
My solution is to watch when the build skips the "transpile" phase, and do a re-save until it does the transpile.

[aslaugsollilja]

@akaztp interesting, looks like that doesn't work for me. At least my changes aren't reflected in the browser though I do a re-save until I see the "transpile" phase.. I have to kill the service-worker chrome://serviceworker-internals/ and unregister and then I have to save again or refresh, and then I see my changes..

[akaztp]

If you do not need the service worker, you can disable it in the index.html of the project (by removing the related script snippet). That's my case.

[aslaugsollilja]

thank you @akaztp, that helped!

[AlQuraian]

I'am suddenly having the same issue. It oonly happens with the template files, when I change ts files changes are reflected on both html and ts files.

ionic info:

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.6.0

System:

Android SDK Tools : 26.0.2
Node              : v8.4.0
npm               : 5.3.0
OS                : Windows 10

@danbucholtz can you please reopen this issue?

[bradbullard]

@AlQuraian I too have been running into this issue. A quick fix I have stumbled on for Mac users, in the CLI instead of hitting control + c to stop the dev server press control + z. You may get a different exit message than normal but when you fire it back up with ionic serve -l it will update correctly. I have not tested on window or linux machines, results may vary.

[ZelimDamian]

Have the same issue (with and without -l). Template changes only reflected if typescript files change.

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

@ionic/cli-utils  : 1.18.0
ionic (Ionic CLI) : 3.18.0

local packages:

@ionic/app-scripts : 3.0.1
Ionic Framework    : ionic-angular 3.8.0

System:

Node : v8.7.0
npm  : 5.4.2 
OS   : macOS Sierra

Misc:

backend : legacy

[jeffminsungkim]

I'm struggling the exact same issue as @ZelimDamian said above.
cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

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

System:

Node  : v8.9.0
npm   : 5.5.1
OS    : OS X El Capitan
Xcode : Xcode 8.0 Build version 8A218a

[NL33]

Are there any updates on this issue? I continue to have the problem: I save changes to an html or ts file in development, live-reload occurs, but then the browser shows an old version of the code--often displaying an error message associated with an earlier code version that has since been corrected. Often the earlier code version that is displayed is from several versions earlier.

Seems like if I then once again save the typescript file, it reloads and shows the updated (correct) template in the browser.

Happens for sure on Chrome. Not sure about Safari. Happens even if I go to different ports (ie, ionic serve --port 8102 / ionic serve --port 8103, etc...)

ionic version: 3.19.0. typescript version: 2.6.2.

[kaldr]

same problem.

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

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.4.0
Ionic Framework    : ionic-angular 3.7.1

System:

Node : v8.2.1
npm  : 5.5.1 
OS   : macOS High Sierra

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : legacy

[DrewLandgrave]

bump

[NL33]

For me (Mac OS High Sierra, ionic version: 3.19.0. typescript version: 2.6.2), I think the problem occurs when I save a file while a reload is in process. If the code is still being built when I hit save on a file, it seems to confuse the system and sometimes loads old code. If I save my code changes only after all reloading/building is complete, I have not noticed the issue.

[mebibou]

Using @ionic/[email protected] and same problem, nothing gets picked up when I make changes to a sub-module, I have to manually go in Application -> Cache -> Cache Storage -> ionic-cache -> Delete in Chrome to be able to have changes reflected, such a waste of time

[puffnir]

Hey,
Someone find a solution for this issue?

Thanks!

[marcellkiss]

Same here, saving ts files works, saving html templates jumps back to older js versions..
@ionic/[email protected]

[imVinayPandya]

Ionic is reloading browser but changes are not reflecting.

here is my system conf.

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

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : browser 5.0.1
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v9.8.0
npm  : 5.6.0 
OS   : Linux 4.13

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

```

is there any workaround or any solution?

[inejose]

Same here, live reloading works well excepto when I update a custom component. Please guys, take a look to this, I'm gonna die in front of the computer and nobody will find me.... lol

cli packages:

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

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.7
Cordova Platforms  : android 6.2.3 browser 5.0.1
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v6.11.3
npm               : 3.10.10
OS                : Windows 10

Environment Variables:

ANDROID_HOME : C:\android\sdk1

Misc:

backend : pro

[paulalbertdev]

Same problem here... sometimes "ionic serve" seems to use an old build, reverting things that have already been changed and tested inbetween

[imVinayPandya]

@paulalbertheliopsis that is also happening with me.

[inejose]

@jgw96 please, can you take a look on this? It is almost impossible to develop components with this issue.

[FanFanFantastic]

I get the same error messages as if the page was cached and whatever I changed doesn't get reflected. It kept on showing the old erorrs/code which I had get rid of

[patwaswapnil]

Same here

"ionic-angular": "3.9.2"
CLI: 3.20.0

[psimondk]

Just upgraded to latest ionic -- same issue

[txc1996]

any update? same issue

[federicoruf]

any update? I'm having the same issue when I run ionic cordova run browser --livereload? Am I doing something wrong?

[zakton5]

Just another MAJOR issue that the Ionic team seems to brush to the side. I deal with this on a daily basis and it adds way too much time to my development process having to serve every couple of minutes. Please fix this.

@danbucholtz @jgw96

[AhmetFUsta]

Whenever I save html and/or ts files there's a big chance another file jumps back to an older version. So then I change something in the file that's an older version now, save it and then the files that I initially changed jump back to their older versions. It's very annoying I can't keep every file on their newest version unless I serve again.

[ishan123456789]

Few months to go and this issue will complete it's two anniversaries

[paulalbertdev]

Very disturbing issue...

[Masciuniria]

Same problem here.

Ionic:

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

System:

   NodeJS : v8.12.0
   npm    : 6.4.1
   OS     : Windows 10

Someone should reopen this issue.

[JerryBels]

I was gone on other projects for a long time, thought that when I would come back to Ionic at least I wouldn't get this annoying thing coming at me all the time... Nope ! :rofl:

[frankmckechnie]

Has this issue been fixed?

I am experiencing the same thing

[aslaugsollilja]

Don't think so, last time I was using ionic (couple of weeks ago) I was still experiencing it. Needless to say I gave up and I'm not using ionic anymore.