HTML5 mode with Phonegap and AngularJS

All we need is an easy explanation of the problem, so here it is.

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 <base/> tag in meta ( also tried with <base href=”” />, <base href=”/” /> and <base href=”/” target=”_self” /> ),
adding the .html suffix to route endpoints,adding the $delegate.history = false (like follow) inside the .config block

$provide.decorator('$sniffer', function($delegate) {
    $delegate.history = false;
    return $delegate;
});

and obviously

$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);

but there is no way to make it works, adding both the tag and set html5Mode to true will result in a blank screen when application starts.
Also adding one of them will bring to the same result, blank screen.

Adding base tag with “android_asset” like follow

will make correctly load the main controller but then breaks routing….

Tested with target attribute “_blank” and “_self” values…

So my question is,
can html5 mode be enabled using Phonegap and AngularJS?

I am using cordova version 3.4.1-0.1.0 with AngularJS 1.2.16,
tested on Android 4.0.4 real device and Android AVD 4.4.2

Any advice would be very appreciated!
Thanks

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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.

Method 2

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('!');
    }
});

Method 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="/" rel="nofollow noreferrer noopener"> tag from your html file.
  2. Set html5 mode while setting requireBase to false

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

  1. Catch the cordova(phonegap) routes

    // iOS Cordova catcher
    //
    {
        path: '/var/**',
        component: 'cordova'
    },
    // Android Cordova catcher
    //
    {
        path: '/android_asset/www/index.html',
        component: 'cordova'
    }
    
  2. 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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply