HTML5 mode with Phonegap and AngularJS

Question

I\'m trying to make AngularJS html5 mode (true) works with Phonegap. I did a lot of search before to post this, I tried different combination of configurations, adding the

Answer 1

In order to get around this problem with an existing website, I add a angularjs constant at build time that indicates whether or not the build is for phonegap. At config time you can access constants and choose to apply html5mode.

//Add this portion via your build scripts e.g. grunt or gulp
//make the constant change depending on if this is a Phonegap build or not
angular.module('myAppConstants', []).constant('PhonegapConstant', true);

//How to use
angular.module('myApp', ['myAppConstants']).config(function(
    $locationProvider,
    PhonegapConstant
) {
    if(!PhonegapConstant) {
        $locationProvider.html5mode(true);
        $locationProvider.hashPrefix('!');
    }
});

Answer 2

Based on my experience and on this comment from Raymond Camden (who works on PhoneGap) it is not possible to use html5mode with PhoneGap + Angular.

Answer 3

I have just gotten this working with angularjs 1.5, the new component router, and cordova(phonegap) 6.0.

Its a bit hacky, but here's what I had to do:

1. Remove the <base href="/"> tag from your html file.
2. Set html5 mode while setting requireBase to false

$locationProvider.html5Mode({ enabled: true, requireBase: false });

3. Catch the cordova(phonegap) routes

   // iOS Cordova catcher
   //
   {
       path: '/var/**',
       component: 'cordova'
   },
   // Android Cordova catcher
   //
   {
       path: '/android_asset/www/index.html',
       component: 'cordova'
   }
   

4. Make a cordova component which then reroutes to wherever you like.

       if(cookieService.loggedIn()) {
           $rootRouter.navigate(['Newsfeed']);
       }
       else {
           $rootRouter.navigate(['Title']);
       }
   

Now the rest of your routes you can use normally. I did come up against one issue with this method though, all of my local images and svgs need to start with the full path, /android_asset/www/images for android, so I made a little filter that spits out the proper asset path for web, android, and ios.