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

score 9 · Accepted Answer · answered Apr 24 '14 at 20:10

9

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.

answered Apr 24 '14 at 20:10

Steve Greatrex

15,789
5
59
73

Thank you Steve, at least a confirm that is not possible. Do you know if there is any workaroud to port to Phonegap an already finished AngularJS application that uses html5 mode? – Sergio Rinaudo Apr 25 '14 at 21:18
All I have done in the past is turn off html 5 mode. It's pretty meaningless under phonegap in any case! – Steve Greatrex Apr 27 '14 at 07:38
1

I agree with you, under Phonegap it doesn't make any sense, I never wanted to say otherwise. My point is that if I have an already finished application that uses html5 mode the porting to Phonegap it's not straight... Anyway, thanks again for your answer! – Sergio Rinaudo Apr 28 '14 at 11:01
1

@SergioRinaudo I realize this won't help existing code, but I think this is a vote in favor of using ui-router so that you are routing against state names rather than directly with urls. Also, I've found that https://github.com/MobileChromeApps/mobile-chrome-apps, which is built on top of cordova, appears to work with html5 mode (not sure why). MCA hasn't reached a major release and I've run into a other issues while while using it, so it may not be a cure all. – freakTheMighty Oct 19 '14 at 19:28
I am in the same situation and the best I could do is parse JS/HTML/CSS with C# and replace links, so every time I deploy my Angular web app to mobile, I run the parser and then compile. Is there a better way? Gulp? – Toolkit Sep 05 '15 at 02:44

score 2 · Answer 2 · answered Feb 14 '15 at 00:13

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

answered Feb 14 '15 at 00:13

brain_bacon

1,120
11
16

yeah but how about all links? If a link is in a template I have to use / and it obviously breaks phonegap app. Is there some tutorials how to manage single codebase for Angular/Phonegap? – Toolkit Sep 05 '15 at 02:46
@Toolkit if you use regular HTML5 mode links you can use [this a element directive](https://gist.github.com/BrainBacon/2700df3a8d8a83d19a57) to support links across both native and browser applications. – brain_bacon Oct 08 '15 at 22:06
actually i am using now ui-sref="login" style – Toolkit Oct 09 '15 at 00:35

score 0 · Answer 3 · answered Mar 23 '16 at 23:12

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:

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

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

Catch the cordova(phonegap) routes

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

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.

HTML5 mode with Phonegap and AngularJS

3 Answers3

Linked