Ionic v3 Live Reload not working

[jgw96]

From @silverbackdan on May 17, 2017 12:7

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[X] 3.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
While running ionic serve or ionic run <platform> -l no file changes trigger a reload or have any effect. (live reload not working). Are there any dependencies I need to make sure are installed myself or any way of outputting any logs on the files that should be being watched or running the watch command on it's own with a verbose output?

Expected behavior:
Live reload should be working and enable updates to html/scss files etc. to be reflected without a rebuild.

Steps to reproduce:
ionic serve or ionic run <platform> -l

Related code:
N/A

Other information:
Output when starting to run on the browser platform with livereload. It opens a browser on port 8000, I'm not sure if it should be 8100 - either way, neither port seems to update when scss files or html files are changed and saved.

$ ionic cordova run browser -l -c --verbose --address 192.168.1.101
[DEBUG] Load global plugin @ionic/cli-plugin-proxy
[DEBUG] Load local plugin @ionic/cli-plugin-cordova from ***/node_modules/@ionic/cli-plugin-cordova
[DEBUG] Load local plugin @ionic/cli-plugin-ionic-angular from ***/node_modules/@ionic/cli-plugin-ionic-angular
Starting app-scripts server: --livereload --l --consolelogs --c --address 192.168.1.101 --port 8100 --p 8100 --livereload-port 35729 --r 35729 --iscordovaserve --externalIpRequired --nobrowser - Ctrl+C to cancel
[14:18:24]  watch started ... 
[14:18:24]  build dev started ... 
[14:18:24]  clean started ... 
[14:18:24]  clean finished in 3 ms 
[14:18:24]  copy started ... 
[14:18:24]  transpile started ... 
[14:18:28]  transpile finished in 3.27 s 
[14:18:28]  preprocess started ... 
[14:18:28]  deeplinks started ... 
[14:18:28]  deeplinks finished in 89 ms 
[14:18:28]  preprocess finished in 89 ms 
[14:18:28]  webpack started ... 
[14:18:32]  copy finished in 7.65 s 
[14:18:36]  webpack finished in 8.47 s 
[14:18:36]  sass started ... 
[14:18:37]  sass finished in 1.06 s 
[14:18:37]  postprocess started ... 
[14:18:37]  postprocess finished in 9 ms 
[14:18:37]  lint started ... 
[14:18:38]  build dev finished in 13.09 s 
[14:18:38]  watch ready in 13.45 s 
[14:18:38]  dev server running: http://192.168.1.101:8100/ 

> cordova run browser
[14:18:40]  lint finished in 2.79 s 
Running command: ***platforms/browser/cordova/build 

Cleaning Browser project
Running command: ***/platforms/browser/cordova/run --nobuild

Static file server running @ http://localhost:8000/index.html
CTRL + C to shut down

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.1.2
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.1.2

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.1.2
    @ionic/cli-plugin-ionic-angular : 1.1.2
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : 1.9.0 
    ios-sim    : 3.1.1 

Copied from original issue: ionic-team/ionic-framework#11700

[imhoffd]

Consolidating to #2312

[silverbackdan]

Thanks @dwieeb but it is the same situation just using ionic serve - happy for it to be consolidated to the browser issue though if that's how you'd categorise it. Can you suggest any known workarounds to get live reload working that you know may be worth trying?

[imhoffd]

Ah, sorry @silverbackdan. I did not see that it wasn't working for you with ionic serve. Let's debug!

Can you show me the output of ionic serve ?

[silverbackdan]

Thanks! No worries, here is serve:

$ ionic serve --verbose
[DEBUG] Load global plugin @ionic/cli-plugin-proxy
[DEBUG] Load local plugin @ionic/cli-plugin-cordova from **/node_modules/@ionic/cli-plugin-cordova
[DEBUG] Load local plugin @ionic/cli-plugin-ionic-angular from **/node_modules/@ionic/cli-plugin-ionic-angular
[DEBUG] Checking for latest plugin version of ionic@latest.
"3.1.2"

[DEBUG] Latest version of ionic@latest is .
[DEBUG] Checking for latest plugin version of @ionic/cli-plugin-proxy@latest.
"1.1.2"

[DEBUG] Latest version of @ionic/cli-plugin-proxy@latest is .
[DEBUG] Checking for latest plugin version of @ionic/cli-plugin-cordova@latest.
"1.1.2"

[DEBUG] Latest version of @ionic/cli-plugin-cordova@latest is .
[DEBUG] Checking for latest plugin version of @ionic/cli-plugin-ionic-angular@latest.
"1.1.2"

[DEBUG] Latest version of @ionic/cli-plugin-ionic-angular@latest is .
Starting app-scripts server: --log-level debug --port 8100 --livereload-port 35729 --address 0.0.0.0 - Ctrl+C to cancel
[08:52:07]  watch started ... 
[08:52:07]  build dev started ... 
[08:52:07]  clean started ... 
[08:52:07]  clean finished in 5 ms 
[08:52:07]  copy started ... 
[08:52:07]  transpile started ... 
[08:52:11]  transpile finished in 3.73 s 
[08:52:11]  preprocess started ... 
[08:52:11]  deeplinks started ... 
[08:52:11]  deeplinks finished in 90 ms 
[08:52:11]  preprocess finished in 91 ms 
[08:52:11]  webpack started ... 
[08:52:16]  copy finished in 8.45 s 
[08:52:20]  webpack finished in 8.71 s 
[08:52:20]  sass started ... 
[08:52:21]  sass finished in 1.36 s 
[08:52:21]  postprocess started ... 
[08:52:21]  postprocess finished in 6 ms 
[08:52:21]  lint started ... 
[08:52:21]  build dev finished in 14.01 s 
[08:52:22]  watch ready in 14.30 s 
[08:52:22]  dev server running: http://localhost:8100/ 

[08:52:24]  lint finished in 2.51 s 

Should I see anything log when a file changes? I can't see anything appear with any html, ts or scss file changes. I wonder if it's permissions on the files or if the files are never actually watched. That or perhaps I'm missing a dependency.

Also ionic cordova run android -l -c --verbose - it appears because the serve command doesn't add plugins it brings up an error.

$ ionic cordova run android -l -c --verbose
[DEBUG] Load global plugin @ionic/cli-plugin-proxy
[DEBUG] Load local plugin @ionic/cli-plugin-cordova from **/node_modules/@ionic/cli-plugin-cordova
[DEBUG] Load local plugin @ionic/cli-plugin-ionic-angular from **/node_modules/@ionic/cli-plugin-ionic-angular
Starting app-scripts server: --livereload --l --consolelogs --c --address 0.0.0.0 --port 8100 --p 8100 --livereload-port 35729 --r 35729 --iscordovaserve --externalIpRequired --nobrowser - Ctrl+C to cancel
[08:57:32]  watch started ... 
[08:57:32]  build dev started ... 
[08:57:32]  clean started ... 
[08:57:32]  clean finished in 3 ms 
[08:57:32]  copy started ... 
[08:57:32]  transpile started ... 
[08:57:36]  transpile finished in 3.36 s 
[08:57:36]  preprocess started ... 
[08:57:36]  deeplinks started ... 
[08:57:36]  deeplinks finished in 95 ms 
[08:57:36]  preprocess finished in 97 ms 
[08:57:36]  webpack started ... 
[08:57:45]  copy finished in 12.09 s 
[08:57:45]  webpack finished in 8.64 s 
[08:57:45]  sass started ... 
[08:57:46]  sass finished in 1.10 s 
[08:57:46]  postprocess started ... 
[08:57:46]  postprocess finished in 10 ms 
[08:57:46]  lint started ... 
[08:57:46]  build dev finished in 13.41 s 
[08:57:46]  watch ready in 13.67 s 
[08:57:46]  dev server running: http://localhost:8100/ 

> cordova run android
[08:57:48]  lint finished in 2.72 s 
ANDROID_HOME=/Users/SilverbackIS/android/android-sdk-macosx
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_25.jdk/Contents/Home
Subproject Path: CordovaLib
Starting a Gradle Daemon (subsequent builds will be faster)

null

The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.

	at build_296dok7khnhpdvwve0rju9onz.run(**/platforms/android/build.gradle:139)
org.xwalk:xwalk_core_library:21+
The JavaCompile.setDependencyCacheDir() method has been deprecated and is scheduled to be removed in Gradle 4.0.

Incremental java compilation is an incubating feature.
The TaskInputs.source(Object) method has been deprecated and is scheduled to be removed in Gradle 4.0. Please use TaskInputs.file(Object).skipWhenEmpty() instead.

:preBuild
 UP-TO-DATE
:preArmv7DebugBuild
 UP-TO-DATE
:checkArmv7DebugManifest

:preArmv7ReleaseBuild 
UP-TO-DATE
:preX86DebugBuild
 UP-TO-DATE

:preX86ReleaseBuild
 UP-TO-DATE

:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild
 UP-TO-DATE
:CordovaLib:checkDebugManifest

:CordovaLib:prepareDebugDependencies

:CordovaLib:compileDebugAidl
 
UP-TO-DATE
:CordovaLib:compileDebugNdk
 
UP-TO-DATE
:CordovaLib:compileLint
 
UP-TO-DATE
:CordovaLib:copyDebugLint
 
UP-TO-DATE
:CordovaLib:mergeDebugShaders
 
UP-TO-DATE
:CordovaLib:compileDebugShaders
 UP-TO-DATE

:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets
 UP-TO-DATE

:CordovaLib:mergeDebugProguardFiles
 
UP-TO-DATE
:CordovaLib:packageDebugRenderscript
 
UP-TO-DATE
:CordovaLib:compileDebugRenderscript
 
UP-TO-DATE
:CordovaLib:generateDebugResValues
 
UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE

:CordovaLib:packageDebugResources
 
UP-TO-DATE
:CordovaLib:processDebugManifest
 
UP-TO-DATE
:CordovaLib:generateDebugBuildConfig
 
UP-TO-DATE
:CordovaLib:processDebugResources
 
UP-TO-DATE
:CordovaLib:generateDebugSources
 
UP-TO-DATE
:CordovaLib:incrementalDebugJavaCompilationSafeguard
 
UP-TO-DATE
:CordovaLib:compileDebugJavaWithJavac
 
UP-TO-DATE
:CordovaLib:processDebugJavaRes
 
UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForDebug
 
UP-TO-DATE
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug
 
UP-TO-DATE
:CordovaLib:mergeDebugJniLibFolders
 UP-TO-DATE

:CordovaLib:transformNative_libsWithMergeJniLibsForDebug
 
UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForDebug
 
UP-TO-DATE
:CordovaLib:bundleDebug
 
UP-TO-DATE
:CordovaLib:preReleaseBuild
 UP-TO-DATE
:CordovaLib:checkReleaseManifest

:CordovaLib:prepareReleaseDependencies

:CordovaLib:compileReleaseAidl
 
UP-TO-DATE
:CordovaLib:compileReleaseNdk
 
UP-TO-DATE
:CordovaLib:copyReleaseLint
 
UP-TO-DATE
:CordovaLib:mergeReleaseShaders
 
UP-TO-DATE
:CordovaLib:compileReleaseShaders
 
UP-TO-DATE
:CordovaLib:generateReleaseAssets
 
UP-TO-DATE
:CordovaLib:mergeReleaseAssets
 
UP-TO-DATE
:CordovaLib:mergeReleaseProguardFiles
 
UP-TO-DATE
:CordovaLib:packageReleaseRenderscript
 
UP-TO-DATE
:CordovaLib:compileReleaseRenderscript
 
UP-TO-DATE
:CordovaLib:generateReleaseResValues
 
UP-TO-DATE
:CordovaLib:generateReleaseResources 
UP-TO-DATE
:CordovaLib:packageReleaseResources
 
UP-TO-DATE
:CordovaLib:processReleaseManifest
 
UP-TO-DATE
:CordovaLib:generateReleaseBuildConfig
 
UP-TO-DATE
:CordovaLib:processReleaseResources
 
UP-TO-DATE
:CordovaLib:generateReleaseSources
 
UP-TO-DATE
:CordovaLib:incrementalReleaseJavaCompilationSafeguard
 UP-TO-DATE

:CordovaLib:compileReleaseJavaWithJavac
 UP-TO-DATE

:CordovaLib:processReleaseJavaRes
 
UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForRelease
 
UP-TO-DATE
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForRelease
 
UP-TO-DATE
:CordovaLib:mergeReleaseJniLibFolders
 
UP-TO-DATE
:CordovaLib:transformNative_libsWithMergeJniLibsForRelease
 
UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForRelease
 UP-TO-DATE

:CordovaLib:bundleRelease
 UP-TO-DATE

:prepareComAndroidSupportAnimatedVectorDrawable2510Library
 
UP-TO-DATE
:prepareComAndroidSupportAppcompatV72510Library
 UP-TO-DATE

:prepareComAndroidSupportSupportCompat2510Library
 UP-TO-DATE

:prepareComAndroidSupportSupportCoreUi2510Library
 
UP-TO-DATE
:prepareComAndroidSupportSupportCoreUtils2510Library
 UP-TO-DATE

:prepareComAndroidSupportSupportFragment2510Library
 
UP-TO-DATE
:prepareComAndroidSupportSupportMediaCompat2510Library
 
UP-TO-DATE
:prepareComAndroidSupportSupportV42510Library
 
UP-TO-DATE
:prepareComAndroidSupportSupportVectorDrawable2510Library
 
UP-TO-DATE
:prepareComNoisepagesNettoyeurMidi100Rc1Library
 UP-TO-DATE

:prepareOrgApacheCordovaCordovaLib623DebugLibrary
 
UP-TO-DATE
:prepareOrgPuredataAndroidPdCore101Library
 UP-TO-DATE

:prepareOrgXwalkXwalk_core_library21515467Library
 
UP-TO-DATE
:prepareArmv7DebugDependencies

:compileArmv7DebugAidl
 UP-TO-DATE

:compileArmv7DebugRenderscript
 
UP-TO-DATE
:generateArmv7DebugBuildConfig
 UP-TO-DATE

:mergeArmv7DebugShaders
 UP-TO-DATE

:compileArmv7DebugShaders
 UP-TO-DATE

:generateArmv7DebugAssets UP-TO-DATE
:mergeArmv7DebugAssets
 UP-TO-DATE

:createXwalkCommandLineFileArmv7Debug

:generateArmv7DebugResValues
 
UP-TO-DATE
:generateArmv7DebugResources
 
UP-TO-DATE
:mergeArmv7DebugResources

:processArmv7DebugManifest
 UP-TO-DATE

:processArmv7DebugResources

:generateArmv7DebugSources

:incrementalArmv7DebugJavaCompilationSafeguard
 UP-TO-DATE

:compileArmv7DebugJavaWithJavac
 UP-TO-DATE

:compileArmv7DebugNdk
 
UP-TO-DATE
:compileArmv7DebugSources
 
UP-TO-DATE
:transformClassesWithDexForArmv7Debug
 
UP-TO-DATE
:mergeArmv7DebugJniLibFolders
 
UP-TO-DATE
:transformNative_libsWithMergeJniLibsForArmv7Debug
 UP-TO-DATE
:processArmv7DebugJavaRes
 UP-TO-DATE

:transformResourcesWithMergeJavaResForArmv7Debug
 
UP-TO-DATE
:validateSigningArmv7Debug

:packageArmv7Debug

:assembleArmv7Debug
:checkX86DebugManifest

:prepareX86DebugDependencies

:compileX86DebugAidl
 UP-TO-DATE

:compileX86DebugRenderscript
 
UP-TO-DATE
:generateX86DebugBuildConfig
 UP-TO-DATE
:mergeX86DebugShaders
 
UP-TO-DATE
:compileX86DebugShaders
 
UP-TO-DATE
:generateX86DebugAssets
 
UP-TO-DATE
:mergeX86DebugAssets
 
UP-TO-DATE
:createXwalkCommandLineFileX86Debug

:generateX86DebugResValues
 
UP-TO-DATE
:generateX86DebugResources
 
UP-TO-DATE
:mergeX86DebugResources

:processX86DebugManifest
 UP-TO-DATE

:processX86DebugResources

:generateX86DebugSources

:incrementalX86DebugJavaCompilationSafeguard
 UP-TO-DATE
:compileX86DebugJavaWithJavac
 UP-TO-DATE

:compileX86DebugNdk
 UP-TO-DATE
:compileX86DebugSources UP-TO-DATE
:transformClassesWithDexForX86Debug
 
UP-TO-DATE
:mergeX86DebugJniLibFolders
 
UP-TO-DATE
:transformNative_libsWithMergeJniLibsForX86Debug
 
UP-TO-DATE
:processX86DebugJavaRes
 UP-TO-DATE
:transformResourcesWithMergeJavaResForX86Debug
 
UP-TO-DATE
:validateSigningX86Debug

:packageX86Debug

:assembleX86Debug
:assembleDebug

:cdvBuildDebug


BUILD SUCCESSFUL

Total time: 26.851 secs

Built the following apk(s): 
	**/platforms/android/build/outputs/apk/android-armv7-debug.apk
	**/platforms/android/build/outputs/apk/android-x86-debug.apk

ANDROID_HOME=/Users/SilverbackIS/android/android-sdk-macosx
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_25.jdk/Contents/Home
No target specified, deploying to device 'ce021712d45794260c'.

Skipping build...
Built the following apk(s): 
	**/platforms/android/build/outputs/apk/android-armv7-debug.apk

Using apk: **/platforms/android/build/outputs/apk/android-armv7-debug.apk

Package name: com.silverbackis.comonitor
LAUNCH SUCCESS

[adewoleadenigbagbe]

Having the same issue.After launch success ,the command line revert back,here is

the ouput am getting.

[miguelonga]

Same issue here. I do:

• ionic serve
• change and same some html file
• my app on browser show me the building banner
• changes are not refreseh and i have to run another time ionic serve

[adewoleadenigbagbe]

Miguelonga .I got that using Cordova run Android

[manticarodrigo]

Ionic serve stopped working for me yesterday. I'm not sure if it stopped working when I updated the cli but I did notice the added ionic cordova run yesterday.

The issue is that when I run ionic serve it loads the same build from two days ago regardless of changes I make or builds that I run. I can build changes to ios and browser using the new ionic cordova run but my development environment is screwed up without ionic serve and I can't test changse without deploying to my live webapp or phone. Any thoughts?

EDIT:
I had uncommented the service worker script in my index.html briefly so my browser had registered to it and the cache was still there. Problem solved :D

[silverbackdan]

@dwieeb Is there anything else I can provide or do to help you with this issue?

[imhoffd]

Is this not the service worker issue @manticarodrigo described? That's been the solution for a few people now.

[silverbackdan]

Unfortunately not, this is my index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <script data-ionic="inject">
    (function(w){var i=w.Ionic=w.Ionic||{};i.version='3.2.1';i.angular='4.1.0';i.staticDir='build/';})(window);
  </script>
  <meta charset="UTF-8">
  <title>App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
 
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
  </script> -->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

I'm also on the latest version of Ionic so when I run serve, the service script is automatically commented out.

I did just have a website where webpack caused issues on though, it wouldn't compile scss to css (or it would, the final file just wouldn't appear) but it'd be OK with JS and copying assets, but struggled with watching as well, even though node-sass would watch without an issue. So I imagine this will be more related to Webpack now I've spotted that is what's being used in the output.