Ionic app works true on browser but does not work fine in my android device


#1

I have developed an ionic application which it works fine in chrome but after generating .apk file it does not work fine. there is only a warning in chrome developer mode :

SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

here is the details :

  1. I am using only ng-cordova plugin and maps.google .
  2. I use typescript
  3. I have used http://ionicframework.com/docs/guide/publishing.html for generating .apk .

after installing the application on android device, it runs but it only shows my parrent view :

I have an index.html file which is my parent view :

<!DOCTYPE html> <html> <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

  
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>
   
    <script src="http://maps.google.com/maps/api/js?key=My_Api_Kei"></script>
    
    <script src="my_apps_js"></script> </head>

<body dir="rtl" ng-app="appName">
    <ion-nav-view animation="slide-right-left"></ion-nav-view> </body> </html>

this is my run and config functions :

    export var ehmcoModule = angular.module('ModuleName', ['ionic', 'ngCordova']); 

  ehmcoModule.run(function($ionicPlatform: ionic.platform.IonicPlatformService) {
    $ionicPlatform.ready(function() {

      if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
      }
       if (window.StatusBar) {
          //org.apache.cordova.statusbar required
         StatusBar.styleDefault();
       }
    });   });

  ehmcoModule.config(function($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider) {
    $stateProvider
      .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'templates/menu.html',
        controller: Controllers.EhmcoController.controllerName
      })
      .state('app.home', {
        url: '/home',
        views: {
          'menuContent': {
            templateUrl: 'templates/home.html',
            controller:Controllers.HomeController.controllerName
          }
        }
      })
      .state('app.category', {
            url: '/category',
            views: {
                'menuContent': {
                    templateUrl: 'templates/category.html',
                    controller:Controllers.CategoryController.controllerName
                }
            }
      })
     
      
    $urlRouterProvider.otherwise('/app/home');   });

this is my code for getting current location :

   this.$ionicPlatform.ready(() => {
            this.$ionicLoading.show({
                template: '<ion-spinner icon="bubbles"></ion-spinner><br/>wait ...'
            });
            var options = { timeout: 10000, enableHighAccuracy: true };
            this.$cordovaGeolocation.getCurrentPosition(options).then((position) => {

                var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                var mapOptions = {
                    center: latLng,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                this.map = new google.maps.Map(document.getElementById("map"), mapOptions);

                //Wait until the map is loaded
                google.maps.event.addListenerOnce(this.map, 'idle', () => {

                });
                this.$ionicLoading.hide();  
            }, (error) => {
                console.log("Could not get location");
               this.$ionicLoading.hide();  
            });
        }); 

i don’t think that this is a routing problem because i add an item to menu in parent view and route it to first page (app/home). it goes there but angular library does not load there and binded value does not show.

i use this article (http://gonehybrid.com/how-to-debug-the-white-screen-of-death-in-your-ionic-app/) to run application in usb debugging mode by running command :

ionic run android -l -c
it build application and there is an error :

:CordovaLib:compileDebugJavaWithJavacNote: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

but every thing work fine in my table and application run truly.
but by command :

ionic run android --device
application does not work fine and only parent view is shown.
there is also no error in : chrome://inspect/#devices.

can any one help me ?


#2

Finally i solve the problem. i am using typescript and there was some problem in injection in controllers. it works fine in browser but after generating apk file it does not work fine. in order to find such a problem first we can use ‘ng-strict-di’ directive:

 <body dir="rtl" ng-app="Ehmco" ng-strict-di>
    <ion-nav-view animation="slide-right-left"></ion-nav-view>
  </body>

besides of that after activating usb debugging mode of our device, we can run our application by command :

ionic run --device

and in

chrome://inspect/#devices 

we can debug our application and view the problems.