Code works fine on web and using ionic serve but android build is broken

#1

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.

#2

show us your index.html please

#3

Have you debug you device. I think you have some issue in angularjs code.

#4 
<!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()">&nbsp;<a ng-href="/login"><i class="ion-power" style="color:white;font-size:24px !important;"></i></a></span>
		   <span ng-if="isAuthenticated()">&nbsp;<a href="/profile"><i class="ion-person" style="color:white;font-size:24px !important;"></i></a>&nbsp; &nbsp; <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>
#5

Hi Virender - yes I am using the Chrome developer tools console and it shows no angular errors.

Thanks for your reply.

#6

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.

#7

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