I am working to take an existing, medium-complex Angular app and use Ionic to make a mobile version. I am running into a series of issues that I think are related to ui-router, which the app uses. To be specific, in index.html (removed some stuff for clarity):
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="/img/icons/favicon.ico">
<title>My App</title>
<base href="/">
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body ng-app="myApp">
<div ui-view>
<script type="text/javascript" src="/js/app.js"></script>
</div>
</body>
</html>
Notice the
<base href="/">
and the use of absolute paths for the js and favicons (also using this for the css)
When I use Ionic serve, things are fine. However, if I try to run this on an actual device, Ionic can't find the js, css, or favicons. I can fix this by removing <base href="/">, changing the asset paths to be relative, and setting $locationProvider.html5Mode(false) in the js.
However, this totally breaks links all over the rest of app. I'm not sure why the app is set up this way and the we don't have the ability to fix the app to be more straightforward. I've spent a fair amount of time trying to figure out how to make Ionic work with this odd setup, but have failed. Any advice would be extremely helpful. Thanks in advance!
