Ionic-cli: LiveReload not working

[gabolucuy]

Description:
Livereload does not load anything, it stays on white screen.

Steps to Reproduce:
run "ionic serve" and select the app from the app "IonicDevApp" of Android

My ionic info:
cli packages: (/home/gabo/Expanse Software/client app/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 : 2.1.3
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.6.0

System:

Android SDK Tools : 26.0.2
Node              : v6.12.0
npm               : 3.10.10 
OS                : Linux 4.10

Environment Variables:

ANDROID_HOME : /home/gabo/Android/Sdk/

Misc:

backend : pro

[asaratalafim]

I have the similar issue, my info:
cli packages: (/Users/administrator/mobile/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.5
Cordova Platforms  : android
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
ios-sim    : 6.1.2 
Node       : v8.8.1
npm        : 5.5.1 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

[mgleria]

Same problem. Any solution?

[asaratalafim]

I resolved this by downgrading the socket:
npm i -D -E [email protected]

[mgleria]

I resolved this by downgrading the socket:
npm i -D -E [email protected]

It didn't work for me. The following error message is displayed on the console:

WebSocket connection to 'ws://localhost:35729/livereload' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

[gdcruz9]

@asaratalafim

worked for me, deeply thankful.

[imhoffd]

@gdcruz9 The ws solution is outdated and has been fixed in later versions of app-scripts. The correct solution to this problem is to install the latest app-scripts:

npm i -D @ionic/app-scripts@latest

[mgleria]

@dwieeb that didn't work for me. I built a clean instance of the tabs ionic template and then tried to reflect some basic changes on the home page without success.

I have the last version of app-scripts ( "@ionic/app-scripts": "^3.1.8") and the last version of IONIC CLI (3.19.1).

Any idea of why doesn't work livereload feature?

[UPDATE]: If I set a specific port for live-reload launching:
ionic serve -r 35730
it works fine.
Any plausible explanation for this behavior?

[imhoffd]

@mgleria I don't know enough about your system. If you're on mac or linux, I'd say to run lsof -i :35730 and see what pops up. We can debug from there.

[mgleria]

@dwieeb thanks for your reply. It is really strange what is happening here. It works intermittently. It is working right now, and the command you suggest output is:

COMMAND  PID   USER   FD   TYPE DEVICE SIZE/OFF NODE NAME 
chrome  5246 martin  134u  IPv4 214671      0t0  TCP localhost:59100->localhost:35729 (ESTABLISHED)
ionic   7146 martin   21u  IPv4  61273      0t0  TCP *:35729 (LISTEN)
ionic   7146 martin   28u  IPv4 211411      0t0  TCP localhost:35729->localhost:59100 (ESTABLISHED)

I'm on Linux (Ubuntu), and my ionic info command output is:
cli packages: (/home/martin/.nvm/versions/node/v9.3.0/lib/node_modules)

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

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v9.3.0
npm               : 5.5.1 
OS                : Linux 4.13

Environment Variables:

ANDROID_HOME : /home/martin/Android/Sdk/

Misc:

backend : pro

Do you notice something out of place?

[imhoffd]

@mgleria The output of that command tells you which processes are operating on port 35730. You can use lsof -i :35729 to see the processes using the default livereload port. Can you also show me that output?

New ionic serve invocations should check for open ports, but there's clearly an issue with that on your system. That's what I'd like to debug.

[mgleria]

@dwieeb in my previous comment I left the output of lsof -i :35729 while ionic serve was running on the default port. I assume that information is not relevant now because it is working. If it fails again, I will look for the answers in the output of lsof -i :35729 and came back here if it is necessary. Thanks again for your willingness.

[jbgomez21]

Hi @dwieeb
I have exactly the same issue
with default port I run:
lsof -i :35729

Google     317   JB  156u  IPv4 0x9641a155346fb105      0t0  TCP localhost:50204->localhost:35729 (ESTABLISHED)
Google     317   JB  172u  IPv4 0x9641a15534be3f95      0t0  TCP localhost:50199->localhost:35729 (ESTABLISHED)
Google     317   JB  182u  IPv4 0x9641a15534be23a5      0t0  TCP localhost:50198->localhost:35729 (CLOSE_WAIT)
node      1072   JB   29u  IPv4 0x9641a15534be2cf5      0t0  TCP *:35729 (LISTEN)
node      1072   JB   88u  IPv4 0x9641a15534bdfe65      0t0  TCP localhost:35729->localhost:50199 (ESTABLISHED)
node      1072   JB   89u  IPv4 0x9641a15532866e65      0t0  TCP localhost:35729->localhost:50204 (ESTABLISHED)

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

    @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  : ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

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

Environment Variables:

    ANDROID_HOME : /Users/JB/Library/Android/sdk

Misc:

    backend : legacy

Can you help me with that information?

Regards!

[imhoffd]

@jbgomez21 So the quick fix is to use the kill command with the PID: kill 1072

@jbgomez21 @mgleria Have either of you switched between using the --local flag and excluding it? Or --address?

[mgleria]

I've tried with --address and writing my own IP address, but it didn't work. I also try with --local flag, but there was no difference in the behavior.

[gabolucuy]

@mgleria do you still have the issue?

[mgleria]

@gabolucuy yes, indeed. I can't figure out why and how to resolve it.

[imhoffd]

@mgleria Would you mind testing out the CLI 4 RC? It uses a different technique for the app-scripts process and I'm curious (and hopeful) that it fixed it for you: npm i -g ionic@rc

[gabolucuy]

@mgleria recently I updated npm to the latest version and also I deleted the node_modules folder and run npm install again in the project. And livereload started working again. Hope this can help you!

[mgleria]

Thank you very much for responding and sorry for the delays in my answers.

@dwieeb I tried with CLI 4 RC and there are no changes.

@gabolucuy I renamed _node_modules_ and after install CLI 4 RC I run _npm install_. My app is running ok, but _livereload_ still does not work for me.

[imhoffd]

@mgleria How frustrating! We check the livereload websocket port for active usage in the same way as the other ports. Is it always the websocket error you get?

[mgleria]

Since CLI 4RC the _WS Error_ error is not appearing in the console. And when I run lsof -i :35729 all seem to be OK. I really don't know where to look for the issue.
If I stop the server, immediately appear this message in the console:
VM36:164 WebSocket connection to 'ws://localhost:35729/livereload' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED.
That tells me that the server thinks that everything is ok with the port?

[rodrigoguariento]

Try:
$ sudo npm update -g ionic cordova
$ npm outdated
$ npm update

• if you're using firebase, remember to reinstall angularfire2 if some errors occurs ($ npm i angularfire2).