CODEWITHSUNDEEP
htmlionic-framework
user6339631
user6339631

Reputation: 1

Why this ionic app code does not work on device but works with ionic serve on the web?

I appreciate if anyone can help me to fix the problem with this. The result of the app is to show the lat and long when app is running on the device.

This is my index.html:

<!DOCTYPE html>
<html>
  <head>
    <ti

    tle>Geo Location</title>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'">

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>


      </head>
      <body ng-app='starter'>
        This is GeoLocation App

        <!-- your app's js -->
        <script src="js/app.js"></script>

        <script type="text/javascript">
        function showlocation() {
           navigator.geolocation.getCurrentPosition(callback);
        }

        function callback(position) {
           document.getElementById('latitude').innerHTML = position.coords.latitude;
           document.getElementById('longitude').innerHTML = position.coords.longitude;
        }
        </script>


    <input type="button" value="Show Location"
        onclick="javascript:showlocation()" />   <br/>

    Latitude: <span id="latitude"></span>       <br/>

    Longitude: <span id="longitude"></span>
  </body>
</html>

This is app.js:

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {

      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);


      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

This is style.css:

.scroll {
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}

Upvotes: 0

Views: 1153

Answers (2)

Daiki Akiyoshi
Daiki Akiyoshi

Reputation: 107

I had the similar issue and adding geolocation plugin solved the problem for me.

Ionic app works with both "ionic serve" and in ionic view, but not with "ionic build ios"

cordova plugin add cordova-plugin-geolocation

Allow location service on your device from setting.

Upvotes: 0

Gerard Cuadras
Gerard Cuadras

Reputation: 1654

If your device is an Android then...

Connect your device to your computer and go to chrome://inspect/#devices. There you can debug your Ionic app as a website and see what's causing the problem.

To inspect the device you need to enable USB Debugging on your device.

Upvotes: 1

Related Questions