ionic emulate --livereload ios not working after latest Apple updates

[mirkonasato]

See http://forum.ionicframework.com/t/live-reload-error-failed-to-load-webpage-with-error/32831/4

[kylefox]

I can confirm this exact error. It seems something has changed in iOS9 that prevents the simulator from accessing IP addresses on the local network. Connecting to localhost still works, however.

If I run a simple HTTP server from my Mac, I am able to access it using Safari in the iOS simulator at localhost:8000. However, I'm not able to access it at 10.0.1.10:8000 (my local network IP). In fact, Safari shows me the same error (verbatim) that appears in the Ionic logs: "The operation couldn’t be completed. No such file or directory"

I suspect it would work if ionic emulate were modified to accept the same [--all|-a] Have the server listen on all addresses (0.0.0.0) flag that ionic serve provides.

[mirkonasato]

From my investigation (see forum thread) seems like a solution would actually be for ionic emulate to simply pass localhost:8100 as the initial page to load since that works fine in the iOS Simulator, instead of trying to determine the IP from the network interface.

The dev server is listening fine, it's just the Simulator that has no access to the local network. But can see localhost.

[eroh92]

+1 localhost appears to work. You can even see this hitting localhost:8100 and localhost:35729 in mobile safari, while loading these pages on the same ports, but full ip address (i.e 10.x.x.x) still gives the same error I see in the xcode logs: Failed to load webpage with error: The operation couldn’t be completed. No such file or directory

[eroh92]

One workaround I found is to run Charles Proxy. It works because it just proxies those same network calls that are being blocked, back to your local machine.

[mattchue]

+1

[reapp3r]

+1

[johnrobertcobbold]

+1

[jimmyhsu]

Apple's new network transport security rules are the main culprit.

Adding

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

to your *-Info.plist solves most of the issues, but if you specify them separately you will have to manually add it yourself. I would look into automating this process as well.

A would wager that lot of users haven't encountered this issue as many have added the above code for iOS 9.

[bentomas]

@jimmyhsu that isn't the problem. I have that added and it still didn't work for me until I changed to localhost.

[kylefox]

@jimmyhsu @bentomas Yep, separate issue as far as I can tell. Even with the NSAppTransportSecurity patch the simulator is unable to access IP addresses on the local network.

[jimmyhsu]

@bentomas @kylefox Ahh, when I ran the app via xcode it told me the livereload address in the logs that it was blocked due to being HTTP.

A different bug I am getting is $ ionic address doesn't set the attributes correctly, and only refuses to set the address to localhost for me.

[buunguyen]

+1. Pretty sure it's not related to NSAppTransportSecurity as I have it set in the plist but still have the error when live-reload is enabled. Running without live reload works. In the mean time, I'm working around by using iOS 8 simulator.

[johnrobertcobbold]

I had also previously fixed the NSAppTransportSecurity issues by applying the plist fix. Stopped working since I upgraded to El Capitan

[mattchue]

For what it's worth with regards to finding the cause, I did get it working with @eroh92's suggestion. Starting Charles made --livereload work immediately.

[mhartington]

So far, I have been able to isolate this as an issue with apples new ATS setup. @kylefox mentioned not being able to use live-reload with ATS setup, but I have been able to set up live-reload over IP and have it work fine.

My steps to get everything working fine.

1) ionic start tmp && cd tmp

2) npm install cordova-config-utils && chmod +x hooks/after_prepare/011_update_config.js

• (need to fix permission error)

3) add the following to the config.xml

    <config-file platform="ios" target="*-Info.plist" parent="NSAppTransportSecurity">
      <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
      </dict>
    </config-file>

4) ionic run ios --device -lc

With that, I was able to get live reload working without any issues. Even went back to make sure that the live-reload server was setup for IP.

[kylefox]

@mhartington Did you try with the --emulator flag instead of --device ?

[mirkonasato]

I definitely had app transport security disabled when I tested it - using this template: https://github.com/mirkonasato/ionic-starter-blank

[mirkonasato]

In fact, without disabling ATS the localhost workaround didn't work either.

[mhartington]

Hmm, weird that it happens with the sim...but not the actual device...

[mirkonasato]

Yeah it's a weird issue to do with the iOS Simulator and networking. Couldn't find anything in the Apple documentation/release notes to confirm if the new behaviour is expected or not.

Would be great if you could pass an --address option to ionic simulate like you can for ionic serve so at least you can do ionic emulate -lc --address localhost ios.

My versions:

$ ionic info

Your system information:

Cordova CLI: 5.3.3
Gulp version:  CLI version 3.9.0
Gulp local:
Ionic Version: 1.1.0
Ionic CLI Version: 1.7.0
Ionic App Lib Version: 0.5.1-beta.0
ios-deploy version: 1.8.2
ios-sim version: 5.0.2
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.0.1 Build version 7A1001

[kylefox]

Agree that it's weird. The best solution is likely to allow the emulate command to support some of the same options that ionic serve affords:

• --all (as I originally suggested)
• --address (as @mirkonasato suggests)

This adds consistency to the commands, avoids any platform-specific hacks, and is backwards/forwards compatible.

[eroh92]

@kylefox, --address localhost would emulate what running charles is doing. Charles effectively proxies queries on the simulator back to the machine which recognizes the ip address the simulator is looking for.

[kylefox]

@eroh92 Cool, good to know. I'll give Charles a shot. Would still be nice to have a permanent, non-hacky solution that doesn't require a third-party app ;)

[eroh92]

@kylefox, agreed! Just saying that --address localhost should do the trick as in some ways it's what Charles is doing (proxying all http requests to localhost first).

[newyorkpizza]

@kylefox @mirkonasato Hi there. I found this thread when troubleshooting the same issue for an unrelated project. I logged a RADAR based on this one. If multiple people log reports with Apple, we might be able to improve the odds that it'll be fixed.

[kabus202]

Is there any workaround already? Charles Proxy won't refresh the content for me.

[atom2ueki]

+1

[mirkonasato]

Submitted a pull request. If somebody wants to test it install my fork with

npm install -g https://github.com/mirkonasato/ionic-cli

and you should be able to run ionic emulate -lc --address=localhost ios.

[mhartington]

Thanks! Is it submitted to app-lib?

[mirkonasato]

Nope, ionic-cli: https://github.com/driftyco/ionic-cli/pull/629

[kabus202]

Thanks mirkonasato, but it's not working for me on El Capitan IOS 9.1 Xcode 7.1.

[mirkonasato]

@kabus202 "not working" is a bit generic, can you provide some more details? Did you configure App Transport Security to start with?

[kabus202]

@mirkonasato, i can confirm that it's working after i added the ATS. This is great, thanks!!!

[pincombe]

Patch works for me thanks @mirkonasato

[RangerRick]

I can confirm that with ATS configured to allow arbitrary loads, this patch finally fixes livereload for me. I'm using the emulator for the first time in weeks. Another vote for adding this patch. :+1:

[johnrobertcobbold]

Will this fix make its way into the library ?

[zwacky]

+1 for mergin @mirkonasato's patch

[ryoe]

+1 for @mirkonasato's patch

I installed this patch and it worked for me!

Cordova CLI: 5.3.3
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.0
Ionic CLI Version: 1.7.7
Ionic App Lib Version: 0.6.3
ios-deploy version: 1.8.2 
ios-sim version: 5.0.3 
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.1 Build version 7B91b 

[jbavari]

@mirkonasato Thanks for submitting the PR. i've got it merged now and with @ryoe's help i've gotten it tested a bit more. I'll be releasing today.

[jbavari]

@mirkonasato I've also adjusted it to respect ionic emulate --address localhost by removing the address and passed IP address so it will not cause errors for calls passed to Cordova CLI.

[jbavari]

Available in 1.7.8. Please re-open if there still remains to be an issue.

[mirkonasato]

Thanks @jbavari!

[enricodeleo]

I still have the same issue on iOS9 with wkwebview plugin https://github.com/Telerik-Verified-Plugins/WKWebView

[RangerRick]

Any plans on merging this to ionic alpha too? Been playing around with ionic2 but it looks like this isn't there yet.

[MelchnerRoman]

After whitelisting localhost with cordova-plugin-whitelist This works for me: $ ionic run ios -l -c --address localhost

Note: check if you have the latest versions of ionic, cordova and npm

[andrejunges]

have any of you tried it with ionic v2.0 beta? I tried some of these solution and it didnt work for me..

Cordova CLI: 6.0.0 Ionic Version: 2.0.0-beta.1 Ionic CLI Version: 2.0.0-beta.17 Ionic App Lib Version: 2.0.0-beta.8 ios-deploy version: 1.8.5 ios-sim version: 5.0.6 OS: Mac OS X El Capitan Node Version: v5.7.0 Xcode version: Xcode 7.2.1 Build version 7C1002

[sorawit]

Same as @andrejunges (with the exact same ionic info versions). All these solutions do not work for me. App is just stuck at the spashscreen.

[mirkonasato]

@andrejunges @sorawit you probably need to whitelist localhost as @MelchnerRoman said in the previous comment, i.e. add this line to your config.xml:

<allow-navigation href="http://localhost:8100/*"/>

[andrejunges]

@mirkonasato that worked, way easier than I expected haha :+1: Thankss

[amirabiri]

I didn't realize the solution is here. I reached this same solution and also added an answer on SO.

I don't understand the reasoning behind not using localhost by default and trying to figure out the correct (non-localhost) IP ?

Also even without the whitelist plugin I think ionic's core should whitelist localhost by default.