Baig Baig - 1 month ago 18
AngularJS Question

Ionic - App works fine on browser and iOS simulator but not in android simulator

I am really new to the mobile development world and trying my hands on it using IonicFramework.

I am creating a login form and on successful login the user gets take to another state which is called

viewMyList
. Everything seems to be working fine when I run the command
ionic serve
I am able to login and proceed to the next state and all seems to be fine on iOS simulator as well but on Android simulator on clicking the login button nothing happens, I don't see any error either.

My attempt

login.html


<ion-view title="Login">
<ion-content class="has-header" padding="true">
<form class="list">
<h2 id="login-heading3" style="color:#000000;text-align:center;">Welcome back!</h2>
<div class="spacer" style="width: 300px; height: 32px;"></div>
<ion-list>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" placeholder="" ng-model="credentials.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="text" placeholder="" ng-model="credentials.password">
</label>
</ion-list>
<div class="spacer" style="width: 300px; height: 18px;"></div>
<a class="button button-positive button-block" ng-click="login()">Sign In</a>
</form>
</ion-content>
</ion-view>


ng-click
is linked with
login()


Here is my
loginCtrl
which contains the
login()
function

.controller('loginCtrl', function ($scope, $state, $ionicHistory, User) {

$scope.credentials = {
username: '',
password: ''
};
$scope.login = function () {
User.login($scope.credentials)
.then(function (response) {
console.log(JSON.stringify(response));
//Login should not keep any history
$ionicHistory.nextViewOptions({historyRoot: true});
$state.go('app.viewMyList');
})
};

$scope.message = "this is a message loginCtrl";
})


Here is my
User
service that takes care of the login logic

angular.module('app.user', [])
.factory('User', function ($http) {

var apiUrl = 'http://127.0.0.1:8000/api';
var loggedIn = false;

return {
login: function (credentials) {
console.log(JSON.stringify('inside login function'));
console.log(JSON.stringify(credentials));
return $http.post(apiUrl + '/tokens', credentials)
.success(function (response) {
console.log(JSON.stringify('inside .then of login function'));
var token = response.data.token;
console.log(JSON.stringify(token));
$http.defaults.headers.common.Authorization = 'Bearer ' + token;
persist(token);
})

.error(function (response) {
console.log('inside error of login function');
console.log(JSON.stringify(response));
})
;
},

isLoggedIn: function () {
if (localStorage.getItem("token") != null) {
return loggedIn = true;
}
}
};

function persist(token) {

window.localStorage['token'] = angular.toJson(token);
}
});


Here is the
route
behind the login

.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginCtrl'


})


I am really clueless at the moment as I cant seem to figure out why nothing happens on Android, from my troubleshooting all I could find was when I click on login button the code does not seem to be going inside the following function.

$scope.login = function () {
User.login($scope.credentials)
.then(function (response) {
console.log(JSON.stringify(response));
//Login should not keep any history
$ionicHistory.nextViewOptions({historyRoot: true});
$state.go('app.viewMyList');
})
};


Any help will really be appreciated.

Answer

Install whitelist plugin first.

cordova plugin add cordova-plugin-whitelist

add following code in your config.xml file under your root directory of project

<allow-navigation href="http://example.com/*" />

or:

<allow-navigation href="http://*/*" />

If still you are facing any issue, then you can check console while you are running in android device using chrome remote debugging

  • Connect your device with your machine.(Make sure USB debugging should be enable on your mobile).

  • write chrome://inspect in browser in your desktop chrome.

  • you will see connected device, select inspect and check console for log.