Ionic-cli: --livereload not working in rc0

[rob3c]

Hi, I'm using rc0 with the new ionic-app-scripts build setup, and ionic run <platform> --livereload isn't working with the starter projects for either android or ios. Or, more precisely, it's 'working' in the sense that it's detecting changes in the www folder, but there's nothing detecting changes in the source files that ultimately triggers changes in www.

I can get it to work by opening a second terminal and running npm run watch, which invokes the new ionic-app-scripts watch command. It'll produce two EPERM errors in the first ionic run terminal, but then things settle down after the initial rebuild, and live-reloading works as expected after that, more or less.

I guess my question is, is this a bug in the livereload flag (it seems like it is), or is the expected behavior (minus the EPERM FSEvent errors), and the new workflow is to use the watch npm script in a separate terminal like this?

[jeandat]

Would love to have the answer to that to. Seems like a bug.

There is some contradiction in what your are doing though:

• ionic run -l will build in production mode and then start a web server to serve your code via HTTP
• npm run watch will build in dev mode and then start a watcher to recompile when source code has changed

It seems to me that there is only one way to watch for changes in your source code: its by using the watch script which will always compile in dev mode.

So to avoid building for production, remove run:before npm script inside package.json. Thus, ionic run will behave normally and just deploy your code like in v1.

It should resolve your EPERM FSEvent errors.

[jthoms1]

This appears to be a bug. It was not intended to be ran in 2 terminals to get it to work. I will bring this up with the team and we will need to identify what the solution should be.

Thanks for reporting this!

[jthoms1]

I talked with @adamdbradley about how we want to proceed. I think that we will be fixing this issue in an upcoming RC release, but for now the solution you found of running 2 different terminals will work.

I will keep this issue open and use it has the bug report for our upcoming CLI release.

[rob3c]

@jdat82 Good catch! I forgot to mention that I modified the build script in package.json to use dev mode:

"build": "ionic-app-scripts build --dev",

[bastiss]

I changed "emulate:before" and "run:before" value to "watch" (package.json), so
ionic emulate android -lor ionic run android -l
build runs in dev mode and live reload works as expected .

[rob3c]

I'm finding that the two terminal setup is working better for me these days. The watcher crashes a lot - especially when many file changes are made in rapid succession - so I'm happy I can just restart the crashed watcher independently rather than having to rebuild the project when restarting ionic run android -l.

[Lestt]

Hi guys,

I use the last version of ionic cli, and livereload won't work on ionic run command. First, i thought it was because i update my project (didn't do it since one month), but i tried to a fresh install and still the same behaviour (whereas livereload works with ionic serve).
I tried a lot of thing to correct it, but nothing work. is there a real issue ? I tested it on Nexus 5x device with Nougat, maybe it's due to the last version of Android (i don't think so) ? I downgrade the cli to version 1.7.3 to have livereload working actually.
If you need more informations about my conf ask it.

Thanks for your support !

[vejja]

+1

Working off /src

I think the main point is : in Ionic 2 we are working off src/, not www/

This means that building involves two different steps. The first one deals with webpack (src/ -> www/), the second one deals with cordova (www/ -> platforms/).

But from a workflow perspective, who cares ? It ought to be transparent for the end user.

--livereload is a parameter for the dev server

With hindsight I believe there is confusion about the --livereload terminology because ionic serve --livereload works exactly as expected, i.e. it watches for changes in src/ and pushes them to www/ and then updates the browser.

However the problem is that while ionic emulate --livereload pushes changes to the browser, it does not push them to the simulator.

That's why I think the --livereload terminology is confusing. It was always intended to be a parameter for the dev server, not for the cordova buids.

Improving the dev tools

But ultimately, if I run ionic emulate --livereload I don't expect changes to be pushed to the browser, do I ? However I do expect changes to be pushed to the emulator.

I strongly believe that the tooling would be greatly improved by adding the ability to streamline the coding/webpack/cordova process when testing against the emulator or the device.

If ionic emulate --livereload sounds bad, maybe you could implement something like ionic emulate --watch ?

A side note

In the end, what does it mean to type ionic emulate --livereload ?

• If you think about it, this means that you are launching a full build for the emulator, and simultaneously spawning a separate dev server with --livereload ability. So now you have two different testing platforms. _Can't see the need for the dev server when emulating_.
• Now what happens if you make a change to the /src source code ? Logically you end up with two conflicting builds : the one on the emulator is still based on the old code, while the one on the browser has been updated with the new code base. _Doesn't look right to me_.
• It looks like since v2.1.5, this conflict issue has been mitigated by disabling --livereload on ionic emulate. So now you have two platforms, and none of the two is being updated for changes. In essence, --livereload is outright ignored. _Doesn't look right to me either_

[rocco]

... then again ionic help tells you ionic servedoes not have a --livereload option (but a --nolivereload switch-off) whereas both ionic run and ionic emulate do have --livereload option. It says this means 'Live reload app dev files from the device (beta)'.

While this all sounds correct to me, at least ionic serve does not work with 2.1.8: it watches and recompiles but does not live reload (which it should when not passing anything else).

[biesbjerg]

Would be great to have this solved!

But for now, as mentioned in the comments, doing the following let you work in the emulator/on device with live reload:

1. Modify package.json to look like this:
   (added --dev to ionic:build command + added watch command)

...
  "scripts": {
    "ionic:build": "ionic-app-scripts build --dev",
    "ionic:serve": "ionic-app-scripts serve",
    "watch": "ionic-app-scripts watch",
  },
...

1. In terminal 1: ionic emulate ios -l (will start a watch in /www)
2. When build is done, start XCode and open your project to run it in emulator/device (Shouldn't this happen automatically with ios-deploy?)
3. In terminal 2: npm run watch (will start a watch in /src).

In step 4, the build re-generates, and your emulator screen will go white. Go to terminal 1 and enter r to restart via Ionic server commands.

[jthoms1]

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

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

[biesbjerg]

Thanks, @jthoms1!

Watch server seems to start correctly now.

Still, run/emulate does not work correctly.

ionic run ios -l

bash-3.2$ ionic run ios -l
The port  was taken on the host 10.0.0.210 - using port 8000 instead
The port  was taken on the host 10.0.0.210 - using port 8000 instead

> mindly-app@ ionic:serve /Users/kim/ionic/mindly-app/rc-wip
> ionic-app-scripts serve "--port" "8000" "--address" "10.0.0.210" "--liveReloadPort" "8000" "--nobrowser"

[06:05:20]  ionic-app-scripts 0.0.45
[06:05:20]  watch started ...
[06:05:20]  build dev started ...
[06:05:20]  clean started ...
[06:05:20]  clean finished in 5 ms
[06:05:20]  copy started ...
[06:05:20]  transpile started ...
[06:05:26]  transpile finished in 5.49 s
[06:05:26]  webpack started ...
[06:05:26]  copy finished in 5.75 s
[06:05:35]  webpack finished in 9.19 s
[06:05:35]  sass started ...
[06:05:37]  sass finished in 1.90 s
[06:05:37]  build dev finished in 16.62 s
[06:05:37]  watch ready in 16.84 s
[06:05:37]  dev server running: http://10.0.0.210:8000/

Running command: /Users/kim/ionic/mindly-app/rc-wip/hooks/after_prepare/010_add_platform_class.js /Users/kim/ionic/mindly-app/rc-wip


add to body class: platform-ios

Building project: /Users/kim/ionic/mindly-app/rc-wip/platforms/ios/Mindly.xcworkspace

    Configuration: Debug

    Platform: emulator


Build settings from command line:

    CONFIGURATION_BUILD_DIR = /Users/kim/ionic/mindly-app/rc-wip/platforms/ios/build/emulator

    SDKROOT = iphonesimulator10.1

    SHARED_PRECOMPS_DIR = /Users/kim/ionic/mindly-app/rc-wip/platforms/ios/build/sharedpch


Build settings from configuration file '/Users/kim/ionic/mindly-app/rc-wip/platforms/ios/cordova/build-debug.xcconfig':

    CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES = YES
    CODE_SIGN_ENTITLEMENTS = $(PROJECT_DIR)/$(PROJECT_NAME)/Entitlements-$(CONFIGURATION).plist
    CODE_SIGN_IDENTITY = iPhone Developer
    ENABLE_BITCODE = NO
    GCC_PREPROCESSOR_DEFINITIONS = DEBUG=1
    HEADER_SEARCH_PATHS = "$(TARGET_BUILD_DIR)/usr/local/lib/include" "$(OBJROOT)/UninstalledProducts/include" "$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include" "$(BUILT_PRODUCTS_DIR)"
    IPHONEOS_DEPLOYMENT_TARGET = 8.0
    OTHER_LDFLAGS = -ObjC
    SWIFT_OBJC_BRIDGING_HEADER = $(PROJECT_DIR)/$(PROJECT_NAME)/Bridging-Header.h
    TARGETED_DEVICE_FAMILY = 1,2



=== BUILD TARGET CordovaLib OF PROJECT CordovaLib WITH CONFIGURATION Debug ===




Check dependencies




=== BUILD TARGET Mindly OF PROJECT Mindly WITH CONFIGURATION Debug ===


Check dependencies



PhaseScriptExecution Copy\ www\ directory /Users/kim/Library/Developer/Xcode/DerivedData/Mindly-egaqylbrvuzzjcbyzzjgarrlwaio/Build/Intermediates/Mindly.build/Debug-iphonesimulator/Mindly.build/Script-304B58A110DAC018002A0835.sh
    cd /Users/kim/ionic/mindly-app/rc-wip/platforms/ios
    /bin/sh -c /Users/kim/Library/Developer/Xcode/DerivedData/Mindly-egaqylbrvuzzjcbyzzjgarrlwaio/Build/Intermediates/Mindly.build/Debug-iphonesimulator/Mindly.build/Script-304B58A110DAC018002A0835.sh



ProcessInfoPlistFile build/emulator/Mindly.app/Info.plist Mindly/Mindly-Info.plist
    cd /Users/kim/ionic/mindly-app/rc-wip/platforms/ios
    export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/Users/kim/.node/bin:/usr/local/bin:/usr/local/sbin:~/bin:/Users/kim/Library/Android/sdk/platform-tools:/Users/kim/Library/Android/sdk/tools:/Users/kim/Library/Android/sdk/build-tools/22.0.1:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
    builtin-infoPlistUtility /Users/kim/ionic/mindly-app/rc-wip/platforms/ios/Mindly/Mindly-Info.plist -genpkginfo /Users/kim/ionic/mindly-app/rc-wip/platforms/ios/build/emulator/Mindly.app/PkgInfo -expandbuildsettings -format binary -platform iphonesimulator -additionalcontentfile /Users/kim/Library/Developer/Xcode/DerivedData/Mindly-egaqylbrvuzzjcbyzzjgarrlwaio/Build/Intermediates/Mindly.build/Debug-iphonesimulator/Mindly.build/MainViewController-PartialInfo.plist -additionalcontentfile /Users/kim/Library/Developer/Xcode/DerivedData/Mindly-egaqylbrvuzzjcbyzzjgarrlwaio/Build/Intermediates/Mindly.build/Debug-iphonesimulator/Mindly.build/CDVLaunchScreen-SBPartialInfo.plist -additionalcontentfile /Users/kim/Library/Developer/Xcode/DerivedData/Mindly-egaqylbrvuzzjcbyzzjgarrlwaio/Build/Intermediates/Mindly.build/Debug-iphonesimulator/Mindly.build/assetcatalog_generated_info.plist -o /Users/kim/ionic/mindly-app/rc-wip/platforms/ios/build/emulator/Mindly.app/Info.plist



GenerateDSYMFile build/emulator/Mindly.app.dSYM build/emulator/Mindly.app/Mindly
    cd /Users/kim/ionic/mindly-app/rc-wip/platforms/ios
    export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/Users/kim/.node/bin:/usr/local/bin:/usr/local/sbin:~/bin:/Users/kim/Library/Android/sdk/platform-tools:/Users/kim/Library/Android/sdk/tools:/Users/kim/Library/Android/sdk/build-tools/22.0.1:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
    /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/dsymutil /Users/kim/ionic/mindly-app/rc-wip/platforms/ios/build/emulator/Mindly.app/Mindly -o /Users/kim/ionic/mindly-app/rc-wip/platforms/ios/build/emulator/Mindly.app.dSYM



Touch build/emulator/Mindly.app
    cd /Users/kim/ionic/mindly-app/rc-wip/platforms/ios
    export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/Users/kim/.node/bin:/usr/local/bin:/usr/local/sbin:~/bin:/Users/kim/Library/Android/sdk/platform-tools:/Users/kim/Library/Android/sdk/tools:/Users/kim/Library/Android/sdk/build-tools/22.0.1:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
    /usr/bin/touch -c /Users/kim/ionic/mindly-app/rc-wip/platforms/ios/build/emulator/Mindly.app



CodeSign build/emulator/Mindly.app
    cd /Users/kim/ionic/mindly-app/rc-wip/platforms/ios
    export CODESIGN_ALLOCATE=/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/codesign_allocate
    export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/Users/kim/.node/bin:/usr/local/bin:/usr/local/sbin:~/bin:/Users/kim/Library/Android/sdk/platform-tools:/Users/kim/Library/Android/sdk/tools:/Users/kim/Library/Android/sdk/build-tools/22.0.1:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"

Signing Identity:     "-"

    /usr/bin/codesign --force --sign - --timestamp=none /Users/kim/ionic/mindly-app/rc-wip/platforms/ios/build/emulator/Mindly.app

/Users/kim/ionic/mindly-app/rc-wip/platforms/ios/build/emulator/Mindly.app: replacing existing signature



** BUILD SUCCEEDED **


[....] Waiting up to 1 seconds for iOS device to be connected

[....] Found iPhone 7 Plus 'Biesbjergs iPhone' (358d73dcacb602bb96b7cddbbe013ca0ad833931) connected through USB.

2016-11-19 06:05:48.935 ios-deploy[79548:7595417] [ !! ] Can't access app path '/Users/kim/ionic/mindly-app/rc-wip/platforms/ios/build/device/Mindly.app' : No such file or directory

Error: Error code 253 for command: ios-deploy with args: --justlaunch,--no-wifi,-d,-b,/Users/kim/ionic/mindly-app/rc-wip/platforms/ios/build/device/Mindly.app

It does not find the xcode built. This can be fixed by using this command instead:

ionic run ios -l --device

But now I never get the message ** BUILD SUCCEEDED ** and it never attempts to install and run on device - and no errors.

Full terminal dump: https://gist.github.com/biesbjerg/f76b163fff49c3807b19946e47caba34
Dump seems truncated, but it's the full output.

Any idea?

[biesbjerg]

About the truncated output, I think this might be the reason: https://github.com/driftyco/ionic-cli/pull/1694

[Lestt]

Thanks, @jthoms1!
Watch server works now on html and js files, but not on the scss files (even after running ionic setup sass).
To make it work, i had to launch the watch rule in a shell separately. Did i miss something ?

[ionitron-bot[bot]]

Thanks for the issue! This issue appears to be associated with an old version of the Ionic CLI. Please update to the latest CLI version, which supports all versions of the Ionic Framework. If the issue is relevant and if it persists after updating to the latest CLI version, please create a new issue.

Thank you for using Ionic!