9

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

Improve this question

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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?
All I have done in the past is turn off html 5 mode. It's pretty meaningless under phonegap in any case!
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!
@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 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.
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?
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('!');
    }
});
Improve this answer

3 Comments

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 if you use regular HTML5 mode links you can use this a element directive to support links across both native and browser applications.
actually i am using now ui-sref="login" style
0

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 });

  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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.