I have production code deployed to the web and looking fine.
I can run the same code using ‘ionic serve’ command.
But when I run ‘ionic run android’ command - all seems good but the apk opens on my Samsung Galaxy S4 and looks vanilla - no styling - no ionic css - no angular js - just like a plain template.
Makes me think there is a path issue but cannot figure it out.
Any ideas? Do I need to target a different build api for an S4? Any pathing tricks for css and js files?
Stumped.
Thanks for any help or ideas the community can offer.
show us your index.html please
Have you debug you device. I think you have some issue in angularjs code.
<!DOCTYPE html>
<html ng-app="podcastgrabber">
<head>
<meta charset="utf-8" />
<title ng-bind="PageTitle" ></title>
<base href="/index.html" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<meta name="fragment" content="!" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<meta name="google-site-verification" content="dlCUY9Z4MrzyDKcMb-g5EveXxwMqxVGsPEYO8uM_0UE" />
<meta name="description" ng-attr-content="{{MetaDesc}}" />
<meta name="keywords" ng-attr-content="{{MetaKeywords}}" />
<!-- podcastgrabber.com styles -->
<link rel="stylesheet" href="css/style.css" />
<!-- jplayer -->
<link rel="stylesheet" href="css/fontawesome.css" />
<link rel="stylesheet" href="jplayer/skin/metro-fire/jplayer.metro-fire.css" />
<!-- ionic -->
<script src="ionic_1.3.1/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" href="ionic_1.3.1/css/ionic.min.css" />
<link rel="stylesheet" href="ionic_1.3.1/css/ionicons.min.css" />
<!-- angular route -->
<script src="js/angular-route.min.js"></script>
<!-- angular storage -->
<script src="js/ngStorage.js"></script>
<!-- jquery -->
<script src="js/jquery.min.js"></script>
<!-- satellizer oauth -->
<!--[if lte IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/Base64/0.3.0/base64.min.js"></script>
<![endif]-->
<script src="js/satellizer.js"></script>
<!-- toastr -->
<script src="js/toastr.min.js"></script>
<link rel="stylesheet" href="css/toastr.min.css" />
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-56df344de75a4cd6&async=1"></script>
</head>
<body>
<ion-side-menus>
<ion-side-menu-content >
<div class="bar bar-header bar-royal bar-stable nav-title-slide-ios7">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<span class="search_drawer_toggle" style="margin:5px 0 0 15px;"><i class="ion-search" style="font-size:24px !important;" ></i></span>
<div class="header_title">
<a ng-href="/">
<i class="icon ion-headphone"></i> PodcastGrabber.com
</a>
</div>
<div style="float:right; margin:4px 6px 0 0; display:inline;" ng-controller="navController">
<span ng-if="!isAuthenticated()"> <a ng-href="/login"><i class="ion-power" style="color:white;font-size:24px !important;"></i></a></span>
<span ng-if="isAuthenticated()"> <a href="/profile"><i class="ion-person" style="color:white;font-size:24px !important;"></i></a> <a href="/logout" class="header_link"><i class="ion-close-circled" style="color:white;font-size:24px !important;"></i></i></a></span>
</div>
</div>
<!--
<ion-nav-bar class="bar-stable nav-title-slide-ios7" align-title="middle" ng-controller="navController">
<ion-nav-buttons side="left" >
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-title>
<i class="icon ion-headphone"></i> PodcastGrabber.com
</ion-nav-title>
</ion-nav-bar>
-->
<ion-nav-view name="menuContent" animation="slide-left-right" title="">
<ion-view>
<!-- search bar -->
<div class="search_bar_header bar bar-subheader bar-stable item-input-inset" ng-controller="searchBar">
<form ng-submit="dosearch()">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon" ></i>
<input type="search" placeholder="Search" class="input_search" ng-model="keywords">
<button type="submit" class="button button-small button-positive" >
search
</button>
</label>
</form>
</div>
<ion-content style="margin-top:50px;" >
<!-- content start -->
<!-- used by routing to display page -->
<!-- content -->
<div class="ng-view">
<!-- where the initial view template will be rendered -->
</div>
<!-- end content -->
</ion-content>
<!-- end main page content -->
</ion-view>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Nav</h1>
</header>
<ion-content class="has-header">
<ion-list ng-controller="navController">
<ion-item class="item-icon-left" nav-clear menu-close ng-if="isAuthenticated()" href="/profile">
<i class="icon ion-person"></i> Profile
</ion-item>
<ion-item class="item-icon-left" nav-clear menu-close ng-if="!isAuthenticated()" href="/login">
<i class="icon ion-power"></i> Login
</ion-item>
<ion-item class="item-icon-left" nav-clear menu-close ng-if="!isAuthenticated()" href="/signup">
<i class="icon ion-person-add"></i> Sign up
</ion-item>
<ion-item nav-clear menu-close ng-if="isAuthenticated()">
<a href="/#/logout">Logout</a>
</ion-item>
<ion-item class="item-icon-left" nav-clear menu-close href="/categories">
<i class="icon ion-grid"></i> Categories
</ion-item>
<ion-item class="item-icon-left" nav-clear menu-close href="/favorites" ng-if="isAuthenticated()">
<i class="icon ion-heart"></i> Favorites
</ion-item>
<ion-item class="item-icon-left" nav-clear menu-close href="/about">
<i class="icon ion-help-circled"></i> About
</ion-item>
<!--
<ion-item nav-clear menu-close href="/add_podcast">
Add a Podcast
</ion-item>
-->
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<div class="bar bar-footer bar-dark player" style="display:none; height:70px;">
<div class="title pull-left jpdisplayname" style="margin-top:-8px;" ></div>
<!-- jplayer -->
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" style="margin-top:25px;">
<div class="jp-controls">
<a class="jp-play"><i class="fa fa-play"></i></a>
<a class="jp-pause"><i class="fa fa-pause"></i></a>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar">
</div>
</div>
<div class="jp-current-time"></div>
</div>
<div class="jp-no-solution">
Media Player Error<br>
Update your browser or Flash plugin
</div>
</div>
<!-- /jplayer -->
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-72636622-1', 'auto');
ga('send', 'pageview');
</script>
<script src="js/app.js"></script>
<script src="js/service-auth.js"></script>
<script src="js/controller-home.js"></script>
<script src="js/controller-about.js"></script>
<script src="js/controller-add-podcast.js"></script>
<script src="js/controller-categories.js"></script>
<script src="js/controller-podcast-category.js"></script>
<script src="js/controller-favorites.js"></script>
<script src="js/controller-episodes.js"></script>
<script src="js/controller-search-results.js"></script>
<script src="js/controller-all-podcasts.js"></script>
<script src="js/controller-episode-detail.js"></script>
<script src="js/controller-auth.js"></script>
<script src="js/md5.js"></script>
<script src="jplayer/jplayer/jquery.jplayer.min.js"></script>
<script src="js/jplayer-load.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
</body>
</html>
Hi Virender - yes I am using the Chrome developer tools console and it shows no angular errors.
Thanks for your reply.
Thanks for your reply to my question.
I appreciate your time and your help.
I have posted the index.html I am using for builds.
If you want to see the app in action you can view it here: http://podcastgrabber.com
Not pretty - my first angular/ionic app - but it works.
Thanks again for your help.
Finally noticed my files were not being loaded into the build.
This had to do with the
<base href="/"/>
I had in place for web use.
I changed it to
<base href="."/>
For use in my app and files loaded.
Now debugging some angular issues.
1 Like