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

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