AngularJS + PhoneGap, routing doesn't work

Question

I am having issue with routing on mobile phone when I use phonegap.

Routing on browser works but on mobile devices is not working.

If there is any question, I can provide more code.

route.js:

app.config(['$routeProvider','$locationProvider','$compileProvider', function($routeProvider,$locationProvider,$compileProvider) {

    $routeProvider
    .when('/', {
        templateUrl: '../login.html',
        controller: 'loginController'
    })
    .when('/home',{
        templateUrl:'../home.html',
        controller:'homeController'
    })
    .when('/profile', {
        templateUrl:'../myprofile.html',
        controller:'profileController'
    })
    .when('/reservations',{
        templateUrl:'../reservations.html',
        controller:'reservationController'
    })
    .when('/ordernow',{
        templateUrl:'../ordernow.html',
        controller:'ordercontroller'
    })
    .otherwise({
        redirectTo: "/home"
    }); 

    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
}]);

Answer 1

After few hours of struggling:

solution: remove "../" from templateUrl

Answer 2

I guess this particular issue might have been fixed long ago, but I was having similar trouble with angular 1.6 and cordova android app.

I was using the correct path for templateUrl but still routing was not working.

After spending a whole day looking through different documentations and trying out different things i stumbled upon a small mystery. I was debugging the cordova app using google chrome inspect and found the app URL to be

file:///android_asset/www/index.html#!/

When i navigate to another page, I get the URL

file:///android_asset/www/index.html#!/#%2faccounts

Then while investigating that, I stumbled upon this

I used the following while configuring the router

$locationProvider.hashPrefix('');

This seemed to fix the problem for me. Code snippet below:

var prakriya = angular.module("prakriya",["ngRoute"]);
prakriya.config(function($routeProvider, $locationProvider){
  $locationProvider.hashPrefix('');  //Added Line here
  $routeProvider
  .when("/", {
    templateUrl: "templates/workspace.html",
    controller: "workspace"
  });
});