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.