TypeError: Cannot read property 'replace' of undefined

Question

I'm getting the above error when trying to use html5Mode with ui-router. Can anyone point me to what I'm doing wrong?

TypeError: Cannot read property 'replace' of undefined
    at bd (angular.js:10555)
    at Object.<anonymous> (angular.js:11403)
    at l.$get.l.$digest (angular.js:14222)
    at l.$get.l.$apply (angular.js:14493)
    at angular.js:1449
    at Object.e [as invoke] (angular.js:4182)
    at d (angular.js:1447)
    at sc (angular.js:1467)
    at Jd (angular.js:1361)
    at HTMLDocument.<anonymous> (angular.js:26086)

That segment in angular.js is:

10554 function trimEmptyHash(url) {
10555   return url.replace(/(#.+)|#$/, '$1');
10556 }

The routing file:

(function(){

    'use strict';

    angular
        .module('app')
        .config(routes);

        routes.$inject = ['$stateProvider', '$locationProvider'];

        function routes($stateProvider, $locationProvider) {

            // Configure app states
            $stateProvider

                .state('app', {
                    abstract: true, 
                    templateUrl: 'modules/app/app.html',                
                    controller: 'AppController'
                })

                .state('app.home', {
                    url: '/',
                    templateUrl: 'modules/home/index.html'
                });

            $locationProvider.html5Mode(true);
        }
})();

I've set the base url in the html:

<base href="/app/" />

Answer 1

I ran into the same issue, and in my case the undefined "url" argument being passed to trimEmptyHash() was ultimately coming from the fact that $$absUrl propery on $location was not getting initialized. Digging in further, it appears that $$absUrl normally gets initialized in the $$compose() method, which typically gets called from $$parse() which typically gets called form the $$parseLinkUrl() method. Here is $$parseLinkUrl() (looking at Angular 1.4.1):

this.$$parseLinkUrl = function(url, relHref) {
  if (relHref && relHref[0] === '#') {
    // special case for links to hash fragments:
    // keep the old url and only replace the hash fragment
    this.hash(relHref.slice(1));
    return true;
  }
  var appUrl, prevAppUrl;
  var rewrittenUrl;

  if ((appUrl = beginsWith(appBase, url)) !== undefined) {
    prevAppUrl = appUrl;
    if ((appUrl = beginsWith(basePrefix, appUrl)) !== undefined) {
      rewrittenUrl = appBaseNoFile + (beginsWith('/', appUrl) || appUrl);
    } else {
      rewrittenUrl = appBase + prevAppUrl;
    }
  } else if ((appUrl = beginsWith(appBaseNoFile, url)) !== undefined) {
    rewrittenUrl = appBaseNoFile + appUrl;
  } else if (appBaseNoFile == url + '/') {
    rewrittenUrl = appBaseNoFile;
  }
  if (rewrittenUrl) {
    this.$$parse(rewrittenUrl);
  }
  return !!rewrittenUrl;
};

In my case, the final "if" clause was not triggering the call to $$parse, because "rewrittenUrl" never got a value, because none of the if/else if clauses in the middle resolved to true. In my case, it was because the url I was using to serve the app (CompanyName/admin.html) was actually above the base Href that I set for the app (CompanyName/admin/), so none of the conditionals resolved to true. As soon as I changed my base Href to just CompanyName/, I no longer ran into this issue.

Alternatively, you could initialize $$absUrl on the location prototype, or wait for some kind of fix from Angular - watch this issue, and see the workaround proposed by joelmdev on March 30th.

Answer 2

I was seeing this exact same TypeError: Cannot read property 'replace' of undefined error when using html5mode too, until I changed:

<base href="app/" />

to

<base href="/app/" />

Note, the missed preceding slash. Hope this can help someone.