The App is not working on Device

I am not sue if I am missing a step or something…

Testing the app on desktop everything work ok and looks right. I am trying to test on iPhone 6 device and nothing is working as it seems js code is not being executed. some of HTML blocks looks ok but other pages are not rendering ok as I hide some controls based on scope variables.

any advice please?

Which device are you testing on? Android or iOS?

I would suggest looking at the android logcat or iOS console (depending on which device) to see if there are any errors. There may be a problem with the way you reference the JS file. Can you type your project structure and how you’re referencing them?

1 Like

it is iOS device
below is what I get on the console when I start the App

2015-01-05 15:31:15.947 SureSupply App[17531:2897454] DiskCookieStorage changing policy from 2 to 0, cookie file: file:///private/var/mobile/Containers/Data/Application/5A1FF065-F8EA-48DB-8BC1-EBDFBBC460AB/Library/Cookies/Cookies.binarycookies
2015-01-05 15:31:16.039 SureSupply App[17531:2897454] Apache Cordova native platform version 3.7.0 is starting.
2015-01-05 15:31:16.040 SureSupply App[17531:2897454] Multi-tasking -> Device: YES, App: YES
2015-01-05 15:31:16.043 SureSupply App[17531:2897454] Unlimited access to network resources
2015-01-05 15:31:16.119 SureSupply App[17531:2897454] [CDVTimer][keyboard] 0.158012ms
2015-01-05 15:31:16.119 SureSupply App[17531:2897454] [CDVTimer][TotalPluginStartup] 0.496984ms
2015-01-05 15:31:16.352 SureSupply App[17531:2897454] Resetting plugins due to page load.
2015-01-05 15:31:16.740 SureSupply App[17531:2897454] Finished load of: file:///private/var/mobile/Containers/Bundle/Application/BCBD9A19-AA95-4170-888D-5A77109DD58F/SS%20App.app/www/index.html#/home

The folder structure

image

Everything in the console looks normal. How are you including your script files in the index.html?

This is the index.html

<!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>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

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

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="app/app.js"></script>
    <script src="app/services/hppassportservice.js"></script>
      <script src="app/account/signin/signincontroller.js"></script>
      <script src="app/addprinter/addprintercontroller.js"></script>
      <script src="app/services/searchservice.js"></script>
      <script src="app/addprinter/catalogprinter/catalogprintercontroller.js"></script>
      <script src="scripts/underscore.min.js"></script>
      <script src="app/directives/dot.js"></script>
  </head>
  <body ng-app="SuSuApp">

      <ion-nav-view></ion-nav-view>
  </body>
</html>

Any advice please?

Is the order of the js files in the index.html page correct?

I don’t see anything wrong with the order of the JS files. I can’t see the structure of the app directory from your photo but if all of the files you are referencing are in the right place it should be working. The only thing I can think of is to add logs to all of the files you don’t think are working and see if they get logged. Anything specifically that isn’t working that is making you think it isn’t being referenced? I’d try logging that first.

ok will add more logs…

I am using console.log and I am able to see logs on chrome…but not on the device… should I use something else for logging?

still investigating the issue but what I found so far is that any html page with a js controller is not working correctly on the device.
did anyone came across a similar issue?

You should use console.log for iOS and install the plugin org.apache.cordova.console in order to see the logs in Xcode. How do you declare your controllers?

I must be missing something here… I am not seeing any logs although I installed the plugin

I tried to create a new empty app using ionic start…

Now my index.html is like this

<!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>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

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

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
     <script src="js/controllers.js"></script>
      <script src="js/services/hppassportservice.js"></script>
  </head>
  <body ng-app="SuSuApp">
      <ion-nav-view></ion-nav-view>
  </body>
</html>

and my controllers.js

angular.module('SuSuApp.controllers', [])

    .controller('createAccountController', ['$scope', 'hppassportService','$stateParams','$location',
function ($scope,hppassportService, $stateParams, $location) {
    
    console.log("createAccountController");


    

}])

    .controller('signInController', ['$scope', 'hppassportService','$stateParams','$location',
function ($scope, hppassportService, $stateParams, $location) {
    console.log("signInController");


    $scope.signin = function (user) {
       
        hppassportService.login(user).then(function(data) {
                if (data !== undefined) {
                    $location.path('/app/addprinter/addPrinterMain');
                }
            }
        );
        

    };

    $scope.cancel = function () {
        $location.path('/home');
    };

}]);

Every thing work fine on both emulator and chrome… not sure what I am doing wrong here…

Oops, sorry about that. You have to add this to your .run for the logger:

if (window.cordova && window.cordova.logger) {
    window.cordova.logger.__onDeviceReady();
}

You’re saying with the new app you just created everything is working on the emulator and browser but not on the device? Sorry it’s hard to debug this without seeing the errors first hand.

Sorry but where do I need to add that code for the logger? in my controller?

No, in the run function. Mine is in app.js like this:

app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            window.cordova.plugins.Keyboard.disableScroll(true);
        }

        if (window.cordova && window.cordova.logger) {
            window.cordova.logger.__onDeviceReady();
        }
    });
});
1 Like

Thanks for that

Now my run functions is like this

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }

        if (window.cordova && window.cordova.logger) {
        window.cordova.logger.__onDeviceReady();
    }
    });
})

but still same observation: I see logs on chrome and emulator but not on the iOS device

I’ve got the same problem!
have you solved? If yes, HOW???

@mmalaka and I solved this issue in private messages. The problem was the files were being included with the wrong case.

For example, index.html included the script this way:

<script src="app/addprinter/addprintercontroller.js"></script>

but the actual file name was addprinterController.js

This was discovered by running the app on an android device and looking at the logcat, which was giving errors.

If you’re talking about the iOS logging, see this post:

1 Like

I have same issue like this before, my apps work well on the browser, but when i run on emulator or device its just show only a header, and then i follow this tutor

and i got clue thats causing my code not work on emulator,

on my case its because i’m write “url” twice

.state('tab', {
    url: "/login", // causing an error on emulator
    url: "/tab",
    abstract: true,
    templateUrl: "app/templates/tabs.html"
})

i hope this can solve your problem

hi,
facing the same issue. I’ve add logger as u described above. After running this where I can view errors? ie how to check logs.

Yes , the same thing is happening with me !
searching for the soluation.