$location.absUrl() returns undefined with base href and html5Mode

[ilovett]

Running Angular 1.3.13

base href to load all assets from a specific subdirectory

    <base href="/marketing/" />

enable html 5 mode

    // remove hash /#/
    $locationProvider.html5Mode(true);

Routes are setup like this:

    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });

Upon loading the application, the following error is thrown n times (I believe per anchor href on the page)

2VM9729 angular.js:11607 TypeError: Cannot read property 'replace' of undefined
    at trimEmptyHash (VM9729 angular.js:10564)
    at $LocationProvider.$get (VM9729 angular.js:11374)
    at Object.invoke (VM9729 angular.js:4185)
    at VM9729 angular.js:4003
    at getService (VM9729 angular.js:4144)
    at Object.invoke (VM9729 angular.js:4176)
    at VM9729 angular.js:4003
    at getService (VM9729 angular.js:4144)
    at Object.invoke (VM9729 angular.js:4176)
    at VM9729 angular.js:6485

Debugging this issue, I found at this line:

    // rewrite hashbang url <> html5 url
    if (trimEmptyHash($location.absUrl()) != trimEmptyHash(initialUrl)) {
      $browser.url($location.absUrl(), true);
    }

$location.absUrl() returns undefined

My GUESS is that the base href is throwing off the matching of routes at $.when('/'), and so is undefined...

[ilovett]

BTW, this setup of serving assets from a subdirectory but having the routes relative to root is required for our setup of having 2 separate applications running on the same domain, we just needed to differentiate the static folders from each other and don't want to include those subdirectories in every route.

This may not be a bug but would be nice to have some way of telling angular about how to map routes vs. assets

[Feamor]

I have the same problem.

My base href is ru

When I run applucation by

http://myDomain.com/ru 

it's all right, but when I use

http://myDomain.com 

(without base href) I have an exception

TypeError: Cannot read property 'replace' of undefined

The same for me, also with Angular 1.3.14

[kindofone]

Same for me. Any response on this?

[Chryssie]

I just encountered this issue, however, I'm not using ngRoute in any fashion. My case was that the check for the base url was case sensitive and my url in the browser was lowercase, but in the base is was uppercase.

The function in question that was doing the case sensitive comparison for me was "beginsWith" in $$parseLinkUrl (there's two of those). While it may not be exactly what your case is this is where it parses the absUrl so that would be a good place to see what's happening.

function beginsWith(begin, whole) {
    if (whole.indexOf(begin) === 0) {
        return whole.substr(begin.length);
    }
}

[ilovett]

related #11223

[SamHwang1990]

it seem the bug is caused by the 814th line in file "src/ng/location.js": $location.$$parseLinkUrl(initialUrl, initialUrl);

the code above send the initialUrl as param twice, it is weird, so i try to send appBase as the first param to $$parseLinkUrl, then the bug fixed.

just want to know this is a correct solution?

[akerfoot]

@SamHwang1990, that will not work if you use any app routing.

For example, if you have the following:

// From <base> href Url
baseHref = '/username/'
// From $browser.url(), what the user typed in the URL bar
initialUrl = 'http://www.example.com/UserName/additional/path/data/?queryString=something#fragment/data'
// From appBase = serverBase(initialUrl) + (baseHref || '/');
appBase = 'http://www.example.com/username/'

If you pass appBase as the first param to $$parseLinkUrl, you will lose all of the routing data, in this case additional/path/data/?queryString=something#fragment/data.

The two parameters for $$parseLinkUrl are the absolute URL and the relative URL, and in this case, since the url is from the browser (not an href link in the body) there is not relative URL so the full path is passed for both.

[akerfoot]

@Chryssie, and anyone dealing with case-sensitivity, you may want to read what I wrote over on #11223

[jscontrust]

Same here with angular 1.3.14
Is there a workaround? Is it fixed in 1.4.0? I´m at development status so it would be ok for me to install a unstable version...

[joelmdev]

Same issue here. Workaround is to set base path to "/" and use full url paths.

[mikerains]

https://docs.angularjs.org/guide/$location - see the section on "Relative links" - using "/my-base" and the prior section "HTML link rewriting" example of "/not-my-base/link".

My app configured with:
<base href="Main"/>
$locationProvider.html5Mode(true);

Should be able to have <a href="/Main/Somepage"/> that causes $location.path to change
Should be able to have <a href="/not-my-base/Somepage"/> that causes window.location.href to change (ie: cause a browser refresh).

However when the ng-app is initializing, the routing configuration fails with error stack::
Cannot read property 'replace' of undefined
at trimEmptyHash
In Angular.js line 10551 (for version 1.3.14)

Also tried 1.4.x.

[joelmdev]

I believe I have this sorted. I'm trying to build angular from scratch to regression test a fix, but running into some issues. Will submit a pull request as soon as I get angular built and tested.

[Narretz]

That sounds great @joelmdev
Don't hesitate to ask if you have problems with the build. We always try to make it easier for people to contribute.