Angular $ locationProvider html5Mode / <base> error
So I have a problem with Angular 1.3.15 and $ locationProvider. Every time I enable html5mode I get an error TypeError: Cannot read property 'replace' of undefined
. If I leave html5mode everything is fine.
My directory structure is like (4.DEV is the version 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 am setting up $ locationProvider like this:
$locationProvider.html5Mode({ enabled: true });
If I change the base tag, then the href on "/"
Angular has no problem (but my assets are not loading). I suspect the Angular issue stems from the fact that my index.html file is the same directory from the rest of the site.
For reasons I will not list here, I cannot change this dir structure, and I DO NOT want to change the base tag (because I don’t want to manually enter the version number in all of these files). I also want to leave html5mode enabled.
Does anyone have a solution to this problem? Is there a way for me to MANUALLY set the "base href" for Angular, but leave the tag the same for all my static assets?
source share
So, it looks like the inner workings of Angular are closely related to the href of the tag, which leads to serious problems if you have a directory structure that is a bit different from mine.
Stumbled upon this Github thread where people are asking for this and @greglockwood posted a fix.
With this fix, the tag can work for your static assets, as long as you provide your own baseHref set for Angular.
Worked like a charm for me! Hope this helps anyone who stumbles upon this!
source share