Angular $ locationProvider html5Mode / <base> 错误

Question

So I'm running into a problem with Angular 1.3.15 and the $locationProvider. Every time I turn html5mode on I get a TypeError: Cannot read property 'replace' of undefined error. If I leave html5mode off, everything works fine.

My directory structure is like so ( 4.DEV being a versioned directory name ):

public /
    - index.html
    4.DEV /
        css /
        js /
        images /
        partials /
        etc...

I have a base tag set like this:

<base href="/4.DEV/">

And I'm configuring the $locationProvider like so:

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

If I change the base tag href to "/" Angular doesn't have any issues (but my assets don't load). I suspect that the issue Angular is having deals with the fact that my index.html file is one directory up from the rest of the site.

For reasons I won't list here, I can't change this dir structure and I REALLY don't want to change the base tag (because I don't want to manually stick a version number into all these files). I also want to leave html5mode on.

Does anyone have a solution for this problem? Is there any way for me to MANUALLY set the "base href" for Angular, but leave the tag alone for all my static assets?

Answer 1

So, it looks like Angular's inner workings are tightly coupled to the href of the tag which results in major issues if you have a directory structure that's a bit unconventional like mine.

Stumbled across this Github thread where people are asking for a feature to change this and @greglockwood posted a fix.

With his fix, the tag can work for your static assets while you provide your own set "baseHref" for Angular's stuff.

Worked like a charm for me! Hope this helps anyone who stumbles across this!