Issue with Angular $location html5Mode within an existing application that cannot change

Question

Issue with Angular $location html5Mode within an existing application that cannot change

All,

I am developing an Angular app (not my first) within an existing JavaScript application that is primarily based in jQuery and Django templates.

In order to get to my Angular application from within the existing application, the URL will look like this:

/existing-application/#myapp/myapp

I realized early that I would have to avoid the injection of $location anywhere in my application or else have Angular become utterly confused with the existing # (hashtag) in the URL.

I have reached a point where this is no longer an option. Therefore, I am setting html5Mode: true and am working with the <base href="" /> header tag to try and find a solution.

However, the closest I have come to having this approach working results in a URL that looks like this after my page renders:

/existing-application/#myapp%2Fmyapp

I currently have a base tag of:

<base href="/existing-application/#myapp/myapp" />

This will load the Angular app. successfully but the URL is then rewritten automatically to:

/existing-application/#myapp%2Fmyapp

Which causes all sorts of problems within and outside of my Angular application.

I have read some reports of bugs wherein there is an issue with $location.rewrite that causes the trailing '/' to become escaped.

I have attempted to work around this issue in several ways, from modifying the <base /> tag, calling $location.path('/existing-application/#myapp/myapp) on page load, using $routeProvider, changing the hashPrefix, and it seems the closest I can ever come to is the escaped trailing slash.

Changing the hashPrefix to '!' merely resulted in:

/existing-application/#!#myapp/myapp

Any advice on what to try next? I am not opposed to not using html5Mode, but without doing so I don't believe this approach will ever work.

Thank you.

Config Block:

.config(['$locationProvider', '$interpolateProvider', '$websocketProvider', 
             function($locationProvider, $interpolateProvider, $websocketProvider) {

        // inject meta 'base' href into <head> tag
        $('head').append('<base href="/existing-application/#myapp/myapp" />');

        $interpolateProvider.startSymbol('{$');
        $interpolateProvider.endSymbol('$}');

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

Angular Information: Angular v. 1.3.1

javascript
angularjs