An strange problem with rendering on Android devices


#1

Hey guys!

When I’m testing this code in a Browser (using command serve on Ionic CLI v1.6.1) it work right. But when I run it on Android (using command run from Ionic CLI on Samsung GalaxyS5, Lollipop) is does not draw my template.

from app-states.js:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('menu.plan', {
    url: '/plan',
    views: {
      'content': {
        templateUrl: 'templates/plan.html',
        resolve: {
         views: function(AppService, Views) {
           return Views.view; },
         state: function(AppService, States) {
           return States.state; }
        },
        controller: 'PlanCtrl'
      }
    }
  })
 ...

from app.js:

.run(function($ionicPlatform, $cordovaSplashscreen, AppService) {
  AppService.init().then(function(deferred) {
    $cordovaSplashscreen.hide();
  });
})

from services.js:

.factory('AppService', function(Views, States) {
  var obj = {
    view_id: "55ae76e8e4b00f157a9849d4",
    state_id: "55abc873e4b039b58548652a"
  };

  obj.init = function() {
    Views.getView(obj.view_id).then(function(deferred) {
      return States.getState(obj.state_id);
    });
  }

  return obj;
})

Views factory

.factory('Views', ['$q', '$mongolabResourceHttp', function($q, $mongolabResourceHttp) {
  var viewsOnDB = $mongolabResourceHttp('views');
  var obj = {};

  obj.getView = function(view_id) {
    var defer = $q.defer();

    viewsOnDB.getById(view_id).then(function(view) {
      obj.view = view;
      defer.resolve();
    });

    return defer.promise;
  };

  return obj;
}])

States factory

 .factory('States', ['$q', '$mongolabResourceHttp', function($q, $mongolabResourceHttp) {
   var statesOnDB = $mongolabResourceHttp('states');
   var obj = {};

   obj.getState = function(state_id) {
     var defer = $q.defer();

     statesOnDB.getById(state_id).then(function(state) {
       obj.state = state;   
       defer.resolve(obj.state);
     });
     return defer.promise;
   };

   return obj;
}])

Here I am using pkozlowski-opensource/angularjs-mongolab and the returned objects in resolve clause are used as a source of content for VM and for custom directives.

I found when I return a simply objects in the section resolve:

resolve: {
  views: function(AppService, Views) {
    return [ someArray ]; },
  state: function(AppService, States) {
    return { someObject }; }
}

it works great on Android.

But I need persistence storage like MongoDB and run it on Android devices :grin:

Help me to understand what is wrong with my code! :relieved:

Thanks!


#2

sounds like you get a javascript error… try to debug your device in google chrome and take a look in the javascript console


#4

Thanks for your tips.

In the debuging console I see these errors:

https://api.mongolab.com/api/1/databases/planbox/collections/views/55ae76e8e4b00f157a9849d4?apiKey=332ETwXt51w6Obx7DOLsWEQlD90ZDVTS Failed to load resource: the server responded with a status of 404 (Not Found)
https://api.mongolab.com/api/1/databases/planbox/collections/states/55abc873e4b039b58548652a?apiKey=332ETwXt51w6Obx7DOLsWEQlD90ZDVTS Failed to load resource: the server responded with a status of 404 (Not Found)

ie the crash the code occurs in AppService:

but I don’t understand why the MongoLab’s server returns on the Android device an HTML 404 code.

Anyway thank you!


#5

you need to add cordova-whitelist plugin, since cordova 5.0.0 :wink:
and allow you app to communicate with your backend.


#6

this occurs when in config.xml has been set:

<access origin="*"/>

I need to replace on:

<access origin="https://api.mongolab.com" />

right?

Why did it occurred when an < access /> does not block any requests?


#7

you have to set the security-meta-tag in your index.html