Ionic-app-scripts: Component changes not reflected in Ionic Serve

[t4tapas]

Description:
The changes done specifically in any on my Ionic custom Components are not loading in Ionic Serve. I know this issue is posted before and tried everything but the issue is still is there.
I have created created few Ionic custom Component as
$ ionic generate component MyComponent
It was working just fine for last 1 month and there was no changes to those component TS files.
Few days back I hade to change some code in one of the Component TS file.

A method inside the Component TS was calling another method of a Provider. I changed the number of parameters in the signature of the Provider from 2 to 1 and changed the Component method accordingly. Its still showing the error that my component method has 2 parameter and trying to calling my Provider method with 1 parameter.

Any other changes done in Pages or Provider are fine. Just the component TS file changes are not reflected.

Steps to Reproduce:
Tried runing in browser and emulators.
Tried npm run build

Output:
TypeScript error for the old code.

My ionic info:

@ionic/cli-utils  : 1.15.2
ionic (Ionic CLI) : 3.15.2

global packages:

cordova (Cordova CLI) : 7.1.0
local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.3.0 ios 4.5.2
Ionic Framework    : ionic-angular 3.6.0

System:

ios-deploy : 1.9.1
ios-sim    : 5.0.13
Node       : v6.11.2
npm        : 3.10.10
OS         : macOS Sierra
Xcode      : Xcode 9.0.1 Build version 9A1004

[olivier-po]

I'm observing the same issue, but only with the html template. I need to quit the serve process and serve again to get the changes in the browser.

[amerzad]

@olivier-po
It was happening in both HTML and TS, but when deleting all the storage from Chrome Development Tools the HTML started to reflect changes, but the TS file changes are still not reflected.
I downgraded to 3.13.0 and it didn't work, so it must be something other than ionic-cli.
I checked the source file in the hard disk in www/build/main.js, and it is not regenerated, so it is not related to browser at all.
It must be somewhere in the dependencies of ionic-cli. That is a tough thing to track.

[tskweres]

Same problem, putting new @Input() variables in my components and it's throwing errors saying they don't exist

[raxkaynan]

Also have the same problem. I'm using ionic-cli 3.19.0.

[amerzad]

@raxkaynan It is working now. I just followed the steps on this link:
https://angular-meteor.com/tutorials/whatsapp2/ionic/setup
And my code comes to work again with live reload.
I think it was a mistake in webpack-merge plugin I used to customize ionic webpack.config.js file.

[captaincole]

I've been seeing this issue to. Every serve it is having trouble updating changes. When I re-save the file though, it seems to catch up to the current version.
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  : android 6.3.0 ios 4.5.2
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 25.2.5
ios-deploy        : 1.9.2
ios-sim           : 5.0.8
Node              : v8.6.0
npm               : 5.5.1
OS                : macOS High Sierra
Xcode             : Xcode 9.2 Build version 9C40b

Environment Variables:

ANDROID_HOME : /Users/Cole/Library/Android/sdk

[laconstituante]

Any Solution for this issue? I am seeing this problem too with ionic 3.19.1
Initially thought it was because of the save all feature I use under vs code. but this seems to be the case event when saving a single file, html or ts.
the only work around is to stop the server and serve again which takes lots of time

[mydoal]

Ping. Any updates?
It might be related to https://github.com/ionic-team/ionic-app-scripts/issues/1405

[inejose]

please we need support with this. Thanks

[pjhartin]

Same issue here, can be quite frustrating.

cli packages: (/home/phillip/.nvm/versions/node/v8.9.3/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:

    Node : v8.9.3
    npm  : 5.8.0 
    OS   : Linux 4.13

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

[geniusbabak]

Really no answers? I have the same problem.
With Firefox it catches HTML updates but not TS, with chrome it doesn't catch any and we have to stop the serve process and run it again.

[jpercas]

I have the same error, is there no answer? I'am modify code but doesn't reflect the changes in emulators or browser.

[Rakonda]

Same error here

[yajuve]

Same problem

[ghost]

same problem

[ghost]

The only thing that works for me, after check out node/npm installs, was:

[erperejildo]

@jnovaes I tried that but still not working

[OutsourceNowZpos]

I been having this issue for over a month now, I will save the changes again and it will work in the browser but once I build those changes are not reflective at all. Specific components for me. I go back to browser my changes are giving errors again like method doesn't exist in my ts, save either html or ts and starts working again. But build android no changes at all.

[slimlime]

Yup same here. Issue for months now and troubleshooted with those checkboxes steps. Inconsistent loads which cause errors where there shouldn't be.

[nazzal88]

I have the same error, is there no answer?

[AMRALAA10]

😞 have the same problem too

[inejose]

any response from IONIC ? Please, this bug (or whatever it is) is making us waste a lot of time and effort, please IONIC support, take 30 seconds to give us some feedback.

Thanks again.

[OutsourceNowZpos]

So do you guys have ionic pro configured in you project? Somehow the Cordova-plugin-ionic was responsible for my 2months as a failure at my company. Worth looking at that if you project has ionic pro configured. I simply Uninstalled it.

[andrewvmail]

Okay this worked guys thanks to
https://github.com/ionic-team/ionic-app-scripts/pull/1420/commits/984ffe716d8012e90318fabef4bed817ff27c19e

vim node_modules/@ionic/app-scripts/dist/template.js    
# comment out the break in line 29

[richigonzalez]

Okay this worked guys thanks to
ionic-team/ionic-app-scripts@984ffe7

vim node_modules/@ionic/app-scripts/dist/template.js    
# comment out the break in line 29

That did the trick for me. Awesome!

[themightysapien]

In inoic 4 beta what i did was

ng run app:serve --poll=2000

to solve it. Dev server running on default angular port

[imhoffd]

@themightysapien Let's keep this issue for v3. In fact, I'll be moving it to the app-scripts repo.

[aravindvakil]

@raxkaynan It is working now. I just followed the steps on this link:
https://angular-meteor.com/tutorials/whatsapp2/ionic/setup
And my code comes to work again with live reload.
I think it was a mistake in webpack-merge plugin I used to customize ionic webpack.config.js file.

Thanks a lot. It's detecting changes

[MichaelWRitchie]

Having the same problem. HTML doesn't update

Ionic:

ionic (Ionic CLI) : 4.10.1 (C:\Users\Micha\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.2

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : not available
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 5 other plugins)

System:

NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
npm : 6.2.0
OS : Windows 10

[TheOnceAndFutureSmalltalker]

Same symptom, but different cause. With me, file watching in VSCode was using up all of the file watching handles - and unnecessarily. In my app I had added the ios and android platforms which added many, many files not really for editing, but were still consuming file watching handles. In my VSCode settings, I added to the file watcher exclude list to exclude the /platforms folder and /plugins folder and restarted VSCode. Now, there were plenty of file watcher handles for the server to use and notice changes taking place in the editor and recompile the app.

[liamdebeasi]

Hi everyone,

This has been merged (via #1420) and released with ionic-app-scripts v3.2.3. Please let us know if you are still running into issues after this. We appreciate everyone's patience!

Thanks!