Ionic emulate ios only works with --livereload

Question

I have a simple ionic app that I'm building and when I test with ionic serve --lab , everything looks great, however, when I try to emulate on the simulators with ionic emulate ios or ionic emulate android , the app doesn't load (seems like all the JS isn't coming through). I am able to attach the debugger and there aren't any console errors.

But, when I do try and run the app with ionic emulate ios --livereload everything seems to work fine.

I tried another sample app from scratch to rule out my machine env and it worked fine.

Any ideas on how I can get the emulate to work without --livereload?

Answer 1

I had the same issue today. I resolved it by removing certain angular dependencies that weren't being detected by the ios build. Check your jslint for any warnings that may provide more information about which dependencies may be injected incorrectly or missing.

See this comment on the Ionic forums for further info.

Answer 2

In my case the white screen of death was caused by bad references to bower components.

For our build process, the relative location of bower components is different is the "source" compared to when the app has been packaged to "www" (bower components are copied to the root directory).

The following reference works when the app is served (if you hover over the links in Chrome inspector, the ".." is removed), but don't work when launched on a device/emulator:

<script src="../bower_components/angular/angular.js"></script>

Live reload works because the application is not being served from the device's file system . Instead Ionic is serving it from the host machine and presumably the bad relative path ("..") is silently ignored as it is when tested in the browser.

Fixing the paths as follows resolved in the problem:

<script src="bower_components/angular/angular.js"></script>

The outstanding question is why no apparent errors are thrown by any component of the application.

Answer 3

1. Find Errors

Start your emulation like this

 $ ionic emulate android -l -c

This will emulate with livereload and log to your console .

Now you should see whats causing the error, logged in the terminal.

2. Missing Cordova Whitelist Plugin?

Often there's the missing Cordova Whitelist Plugin . As you can read here simply do the following steps to get this plugn to work.

$ ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git

if not already added.

open your config.xml inside your project root and add this line inside the <widget> tag.

<allow-navigation href="*" />

Answer 4

就我而言，此问题是由于index.html中包含<base href="/">而引起的，这不会阻止Ionic（通过--livereload）查找本地托管的文件，但完全阻止了Ionic在其中查找文件。捆绑的iOS或Android应用。