Ionic-cli: bug v2: "ionic run browser --livereload" is not refreshing the app after changes

[sebastianovide]

• to reproduce
  
  
  
  • run ionic run browser --livereload
  
  
  • modify a html or ts file
  
  
• expected
  
  
  
  • the app should change. Refreshing the browser you should see the changes
  
  
• instead
  
  
  
  • the console shows that the file changes is being copied by the changes are not reflected in the app. It is still necessary to ctrl+c and restart it
  
  
• workaround: after the change, wait until when the console shows the file changed and then rsync -rtv www/ platforms/browser/www or run another file watcher: fswatch -r www/ | xargs -I % rsync -rtv www/ platforms/browser/www
• workaround 2 ./node_modules/.bin/ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build

[blakenetz]

+1.
Also, I've double-checked my ionic address. This feature was functioning earlier, but has unexpectedly stopped. Any feedback?

[metal3d]

Exactly the same with new version

[jthoms1]

Please install the latest ionic cli. [email protected]. This has incorporated the test tag branch. Thanks for your patience. If you are still having issues please let me know!

npm uninstall -g ionic
npm install -g ionic@latest

[gino8080]

update to ionic@latest this fix the issue thankyou!

[stovmascript]

I'm having an issue with the project failing to build after making a change in src/.

When I run ionic run browser --livereload, it builds fine and opens Chrome etc., but after making a change in a html/scss/ts file, it fails like this:

[14:49:06]  build started ... 
(node:39480) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'send' of undefined
[14:51:37]  build started ... 
(node:39480) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Cannot read property 'send' of undefined
[14:51:43]  build started ... 
(node:39480) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): TypeError: Cannot read property 'send' of undefined

$ ionic info

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.2
Xcode version: Xcode 8.1 Build version 8B62

[huan]

I ran into this issue today with ionic CLI 2.2.1

$ ionic info

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.4.0
Xcode version: Xcode 8.2 Build version 8C38

[tthsympa]

Same issue than @zixia

[imarcelolz]

Same issue on ubuntu 16.04:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v7.4.0
Xcode version: Not installed

[edwardrf]

Same issue on ubuntu 16.04.1 LTS (in docker see below for details):

Cordova CLI: 6.4.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.8
Node Version: v7.6.0
Xcode version: Not installed

Using docker image mkaag/ionic, with docker-compose config:

    image: beevelop/ionic
    ports:
      - "8000:8000"
      - "35729:35729"
    volumes:
      - ../:/myApp
      - ./google-chrome:/usr/local/bin/google-chrome
    working_dir: /myApp
    stdin_open: true
    tty: true
    command: ionic run browser --livereload 

google-chome is an empty bash script as placeholder when ionic tries to run chrome it will not exit with an error.

[huan]

@jthoms1 I believe we should re-open this issue because it seems this bug still exist in the latest version of the code.

[LufoX11]

It's working as expected in cli 2.2.1 (just updated because I was having this issue in 2.1.0)

[LufoX11]

Nope... sorry. It worked well for the first hour and here is the issue again :-1:

[sebastianovide]

@jthoms1 , as this is still reproducible, could you reopen it ?

[sebastianovide]

actually I've just seen that somebody else has reported it in https://github.com/driftyco/ionic-cli/issues/1998. And https://github.com/driftyco/ionic-cli/issues/1818 may be related

[mfreirehfexp]

Having the same issue. Mostly with templates update

[lngr]

Having the same issue as described an reported by others here.

[lcofresi]

Having the same issue ('ionic run browser --livereload' not reloading on template change):

Cordova CLI: 7.0.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.10
Node Version: v6.10.2
Xcode version: Not installed

Please, fix this problem, as it severely impedes fast prototyping.

[olegwn]

Same issue here :( Not only it does not update the source files, it does not live reload browser as well.

[sebastianovide]

Workaround:
./node_modules/.bin/ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build

[CliffyMk]

can you please explain this workaround. @sebastianovide

[wichanan]

From @sebastianovide answer

Workaround: ./node_modules/.bin/ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build

He forced the ionic app script to serve and build the www from ./platform/browser instead of serving from ./www folder

for the shorter command, you can edit the package.json in the scripts key like this:

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

and then on the terminal, you just need to run
npm run browser

now you got the browser version of your app that compatible with cordova

[tscislo]

Same here

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 6.5.0 
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.8
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : browser 4.1.0
Ionic Framework                 : ionic-angular 3.4.2

System:

Node       : v6.11.0
OS         : Linux 4.4
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 3.10.10

[yxliang01]

I confirm that @wichanan 's solution worked perfectly for me.

[nikhilrane1992]

Same here

cli packages: (/home/nikhil/.nvm/versions/node/v8.5.0/lib/node_modules)

    @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.2

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

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

System:

    Android SDK Tools : 26.1.1
    Node              : v8.5.0
    npm               : 5.3.0 
    OS                : Linux 4.10

Misc:

    backend : pro

[gabriellacerda]

@sebastianovide Workaround worked like a charm, thanks!

[imhoffd]

That workaround will only work for live-reload servers that write to disk (@ionic/app-scripts, but _not_ the Angular CLI). So, unfortunately, the workaround or a similar workaround won't work for Ionic Angular 4, which embraces the Angular CLI.

Please see this feature request for proper support for live-reload with the Cordova browser platform: https://github.com/ionic-team/ionic-cli/issues/3043

[imhoffd]

I suppose one could use ng build --watch, however.

[gbbarroso]

Solution isn't working for me, as I get an error (by the ionic push plugin), which does not happen when running ionic cordova platform browser