Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ionic v3 Live Reload not working #2306

Closed
jgw96 opened this issue May 17, 2017 · 40 comments
Closed

Ionic v3 Live Reload not working #2306

jgw96 opened this issue May 17, 2017 · 40 comments

Comments

@jgw96
Copy link
Contributor

jgw96 commented May 17, 2017

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
Copy link
Contributor

imhoffd commented May 17, 2017

Consolidating to #2312

@imhoffd imhoffd closed this as completed May 17, 2017
@silverbackdan
Copy link

silverbackdan commented May 18, 2017

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 imhoffd reopened this May 18, 2017
@imhoffd
Copy link
Contributor

imhoffd commented May 18, 2017

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
Copy link

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
Copy link

Having the same issue.After launch success ,the command line revert back,here is
eeee
the ouput am getting.

@miguelonga
Copy link

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
Copy link

Miguelonga .I got that using Cordova run Android

@manticarodrigo
Copy link

manticarodrigo commented May 26, 2017

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
Copy link

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

@imhoffd
Copy link
Contributor

imhoffd commented Jun 5, 2017

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

@silverbackdan
Copy link

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.

@silverbackdan
Copy link

It appears my issue lies mainly with webpack so I've raised an issue there. A webpack installation on a web-based Laravel project is not watching files or creating the final css files. Thanks for coming back to me though @dwieeb

@silverbackdan
Copy link

Ah ha! In one of my parent folders I had used brackets. Webpack watch command was therefore not working. I've raised an issue there webpack/webpack#5018 - I think this issue is OK to close :)

@silverbackdan
Copy link

Can I add one last thing, the CLI update most recently appears to comment out the service worker script again. However it also seems to remove meta tags (content-security-policy) - should I add as a new issue?

@imhoffd
Copy link
Contributor

imhoffd commented Jun 6, 2017

@silverbackdan Glad you got it. For build issues, generally the best place to create an issue is in the app-scripts repo: https://github.com/ionic-team/ionic-app-scripts

@imhoffd imhoffd closed this as completed Jun 6, 2017
@iknox27
Copy link

iknox27 commented Sep 8, 2017

i have the same issue with ionic 3.4.0 but i dont have the ionic watch ready ... see

ionic-app-scripts serve "--v2" "undefined" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"

[17:35:41] ionic-app-scripts 2.1.4
[17:35:41] watch started ...
[17:35:41] build dev started ...
[17:35:41] clean started ...
[17:35:41] clean finished in 7 ms
[17:35:41] copy started ...
[17:35:41] transpile started ...
[17:35:44] transpile finished in 3.40 s
[17:35:44] preprocess started ...
[17:35:44] deeplinks started ...
[17:35:44] deeplinks finished in 193 ms
[17:35:44] preprocess finished in 194 ms
[17:35:44] webpack started ...
[17:35:44] copy finished in 3.81 s
[17:35:54] webpack finished in 10.24 s
[17:35:54] sass started ...
[17:35:58] sass finished in 3.22 s
[17:35:58] postprocess started ...
[17:35:58] postprocess finished in 15 ms
[17:35:58] lint started ...
[17:35:58] build dev finished in 17.14 s
[17:35:58] dev server running: http://localhost:8100/

@airstep
Copy link

airstep commented Oct 9, 2017

So, I solved it in such way:

cp node_modules/@ionic/app-scripts/configs/watch.config.js {{root_project}}/scripts

Edit:

var watch = require('../node_modules/@ionic/app-scripts/dist/watch');
module.exports = {
  srcFiles: {
    paths: ['{{SRC}}/**/*.(ts|html|s(c|a)ss)'],
    options: { ignored: ['{{SRC}}/**/*.spec.ts', '{{SRC}}/**/*.e2e.ts', '**/*.DS_Store', '{{SRC}}/index.html'] },
    callback: watch.buildUpdate
  }
};

Then, add such line to package.json:

"config": { "ionic_watch": "./scripts/watch.config.js" },

And try it, works for me (tested few minutes now - but it doesn't work about half day ;)

@airstep
Copy link

airstep commented Oct 9, 2017

Not works anymore after few hours.... (

@Lahrachtdi
Copy link

Lahrachtdi commented Oct 9, 2017

@airstep Just tried, but it is not working hh
I'm having the same issue, my Ionic version is 3.12.0 and I'm working on Ubuntu 16
it'is not just the browser that doesn't reload, but also the build don't happen when I change something in my code

@Lahrachtdi
Copy link

Lahrachtdi commented Oct 9, 2017

the version 2.1.4 of @ionic/app-scripts solved the problem for me

@airstep
Copy link

airstep commented Oct 9, 2017

@Lahrachtdi - so, I have already this version - but it's not work with livereload

@Lahrachtdi
Copy link

@airstep I don't know what's happen, it is not working anymore

@sbonder101
Copy link

I had this problem for 3 days now. I solved it by making sure that the path to the app doesn't contain spaces.

@airstep
Copy link

airstep commented Oct 10, 2017

@sbonder101 My path is without any spaces - no luck

@sbonder101
Copy link

@airstep I just created a new project, and I copied the 'src' folder from the old directory, and the package.js file. And installed all the necessary plugins and it worked

@airstep
Copy link

airstep commented Oct 11, 2017

@sbonder101 but it some times work sometimes not... random

@matteobattista
Copy link

matteobattista commented Oct 11, 2017

@sbonder101 what do you mean for "the path to the app doesn't contain spaces."
Thank you

I already have this problem... not solved!

My ionic info:

$ ionic info

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

    @ionic/cli-utils  : 1.13.0
    ionic (Ionic CLI) : 3.13.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

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

System:

    ios-deploy : 1.9.2 
    Node       : v8.6.0
    npm        : 5.5.1 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235 

Misc:

    backend : legacy

@airstep
Copy link

airstep commented Oct 11, 2017

I think this node is closed - so we must go there:
#2719

@airstep
Copy link

airstep commented Oct 13, 2017

Just learned about Stencil and when using demo found that I have error from node.js ENOSPC (not enough space on the drive but I have more than need)

After that I just looked at different issues and found this one:

On Linux (or Mac) we have a max number of system watchers we can place at an IO level (from my understanding). So for large projects, it seems that Jest is trying to watch just way to many files.

To fix:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

And after that livereload again works for project that before has no reaction.

@james11a
Copy link

Thanks @airstep. Setting max_user_watches to a higher value fixed the livereload problem for me too.

@franklintiel
Copy link

Thanks @airstep, the fix is works for me!

@Tulika12
Copy link

Tulika12 commented Dec 8, 2017

Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port
35729 --dev-logger-port 53703 --nobrowser - Ctrl+C to cancel
[15:52:57] watch started ...
[15:52:57] build dev started ...
[15:52:57] clean started ...
[15:52:57] clean finished in less than 1 ms
[15:52:57] copy started ...
[15:52:57] deeplinks started ...
[15:52:57] deeplinks finished in 16 ms
[15:52:57] transpile started ...
[15:53:01] transpile finished in 3.63 s
[15:53:01] preprocess started ...
[15:53:01] preprocess finished in less than 1 ms
[15:53:01] webpack started ...
[15:53:01] copy finished in 3.85 s
[15:53:07] webpack finished in 6.08 s
[15:53:07] sass started ...
[15:53:08] sass finished in 936 ms
[15:53:08] postprocess started ...
[15:53:08] postprocess finished in less than 1 ms
[15:53:08] lint started ...
[15:53:08] build dev finished in 10.86 s
[15:53:08] watch ready in 10.94 s
[15:53:08] dev server running: http://localhost:8100/

[OK] Development server running!
Local: http://localhost:8100
External: http://192.168.1.7:8100
DevApp: tesing@8100 on Lwisl-PC

C:\Users\Lwisl\projects\tesing>
i have also same issue after ionic serve ...application is not running on browser its automatically canceled????
any comment?

@anesask
Copy link

anesask commented Dec 17, 2017

@Tulika12
I had same issue and changing "live-reload port" solved my problem.
Try this in your command line, hope it will works for you.
ionic serve -r 33222

@Tulika12
Copy link

Thanx...@anesask

@Khazi-Nawaz-Ahamed
Copy link

Thanks @airstep, the fix is works for me!

@raykin
Copy link

raykin commented Feb 1, 2018

@anesask change port doesn't work in my case. Even don't know how to debug it.

@anesask
Copy link

anesask commented Feb 1, 2018

@raykin Did you check @airstep's fix?

@gdcruz9
Copy link

gdcruz9 commented Mar 6, 2018

i ran this:

npm i -D -E ws@3.3.2

and now seems to work again.

@henryemekaonuorah92
Copy link

@airstep
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

this solution does not work on my mac os 10.13.4 it returns the error below

sysctl: illegal option -- p usage: sysctl [-bdehiNnoqx] name[=value] ... sysctl [-bdehNnoqx] -a sysctl: illegal option -- p usage: sysctl [-bdehiNnoqx] name[=value] ... sysctl [-bdehNnoqx] -a

@franzisk
Copy link

i ran this:

npm i -D -E ws@3.3.2

and now seems to work again.

What is this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests