$locationProvider.html5Mode(true) broken #2032

kikar · 2015-06-12T11:56:34Z

I used Express with no parameters to generate a quick server that will serve these 2 files:

angular.module('myApp', ['ui.router'])
.config(['$locationProvider', function($locationProvider) {

    $stateProvider
    .state('home', {
        url: '/',
        template: '<h1>Home</h1>'
    });

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

<!DOCTYPE html>
<html ng-app="myApp" ng-strict-di>
<head>
    <title>Lunr Test</title>
    <base href="./">
</head>
<body>
    <nav>
        <ul>
            <li><a ui-sref="home">Home</a></li>
        </ul>
    </nav>

    <div ui-view></div>

    <script src="lib/angular.min.1.3.js"></script>
    <script src="lib/angular-ui-router.min.js"></script>

    <script src="app.js"></script>
</body>
</html>

Using UIRouter 0.2.14 and AngularJS 1.3.16 and I get this error twice in console:

TypeError: Cannot read property 'replace' of undefined
    at Gb (angular.min.1.3.js:94)
    at Re.$get (angular.min.1.3.js:100)
    at Object.e [as invoke] (angular.min.1.3.js:36)
    at angular.min.1.3.js:38
    at d (angular.min.1.3.js:36)
    at Object.e [as invoke] (angular.min.1.3.js:36)
    at angular.min.1.3.js:38
    at d (angular.min.1.3.js:36)
    at Object.e [as invoke] (angular.min.1.3.js:36)
    at angular.min.1.3.js:38

Works normally when setting html5Mode to false, or when I comment that line.

The text was updated successfully, but these errors were encountered:

nateabele · 2015-06-14T21:29:13Z

Seems like it should work. Pretty surprising since it's such a commonly-used feature.

Can anybody else confirm this?

eddiemonge · 2015-06-26T22:00:50Z

I can confirm this exists.

jazzblue · 2015-07-08T16:54:08Z

It is not only ui-router issue, I get it just by doing $locationProvider.html5Mode(true) without any ui-router.

eddiemonge · 2015-07-08T19:15:28Z

So if you take out all traces of ui-router its still happening?

jazzblue · 2015-07-08T19:20:25Z

Yes, I do not use ui-router at all.

jazzblue · 2015-07-08T19:22:11Z

I have just tried this workaround:
#116
(ggoodman commented on May 6, 2013)

...and it seems to be working. Still checking...

eddiemonge · 2015-07-08T19:30:05Z

I am inclined to close this issue then. @kikar if you take out ui-router do you still have the bug?

kikar · 2015-07-21T10:48:47Z

Seems to be an Angular problem. Don't have bug anymore

moander · 2015-11-13T01:33:20Z

Still broken.

Quick fix:

  app.run(function ($browser) {
    $browser.baseHref = function () { return "/" };
  });

pavel06081991 · 2015-11-29T12:28:22Z

Yeah, still have this problem

connor11528 · 2015-12-21T19:02:40Z

@moander's solution works but all you have to do is change <base href="./"> to <base href="/">

More info on this SO post: http://stackoverflow.com/questions/17768814/ngroute-set-base-url-for-all-routes

zhuhongyin · 2016-01-18T09:19:49Z

thanks moander's solution ,fixed by
app.run(function ($browser) {
$browser.baseHref = function () { return "/" };
});

sukrosono · 2016-03-08T12:03:35Z

Thanks @cleechtech and @moander , you save my day. I prefer using that solution via template

Parziphal · 2016-03-31T20:53:08Z

@cleechtech is right. All you have to make sure is that the value for href in your <base> tag has a leading slash, or if it's root, it should be only a slash. Examples:

Wrong:
<base href="foo/">
<base href="./foo/">

Right:
<base href="/foo/">
<base href="/">

aipirvu · 2016-04-25T08:27:22Z

So I had this problem also. What I discovered was that I was using <base href="/My.App.Web/"> and accessing it in the browser on localhost/my.app.web/somepage/... when the error occurs. Changing it to <base href="/my.app.web/"> seems to do the trick but now I would get the error when requesting localhost/My.App.Web/somepage/.... So I asume something in the html5mode is checking case sesitive addresses.

Update:
I'm using angular v1.4.10 and angular-ui-routing v0.2.18

anil826 · 2017-02-12T19:19:15Z

Finally I got a way to to solve this issue by server side as it's more like an issue with AngularJs itself I am using 1.5 Angularjs and I got same issue on reload the page.
But after adding below code in my server.js file it is save my day but it's not a proper solution or not a good way .

app.use(function(req, res, next){
  var d = res.status(404);
     if(d){
     	res.sendfile('index.html');
     }
});

eddiemonge added the bug label Jun 26, 2015

kikar closed this as completed Jul 21, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

$locationProvider.html5Mode(true) broken #2032

$locationProvider.html5Mode(true) broken #2032

kikar commented Jun 12, 2015

nateabele commented Jun 14, 2015

eddiemonge commented Jun 26, 2015

jazzblue commented Jul 8, 2015

eddiemonge commented Jul 8, 2015

jazzblue commented Jul 8, 2015

jazzblue commented Jul 8, 2015

eddiemonge commented Jul 8, 2015

kikar commented Jul 21, 2015

moander commented Nov 13, 2015

pavel06081991 commented Nov 29, 2015

connor11528 commented Dec 21, 2015

zhuhongyin commented Jan 18, 2016

sukrosono commented Mar 8, 2016

Parziphal commented Mar 31, 2016

aipirvu commented Apr 25, 2016 •

edited

Loading

anil826 commented Feb 12, 2017

$locationProvider.html5Mode(true) broken #2032

$locationProvider.html5Mode(true) broken #2032

Comments

kikar commented Jun 12, 2015

nateabele commented Jun 14, 2015

eddiemonge commented Jun 26, 2015

jazzblue commented Jul 8, 2015

eddiemonge commented Jul 8, 2015

jazzblue commented Jul 8, 2015

jazzblue commented Jul 8, 2015

eddiemonge commented Jul 8, 2015

kikar commented Jul 21, 2015

moander commented Nov 13, 2015

pavel06081991 commented Nov 29, 2015

connor11528 commented Dec 21, 2015

zhuhongyin commented Jan 18, 2016

sukrosono commented Mar 8, 2016

Parziphal commented Mar 31, 2016

aipirvu commented Apr 25, 2016 • edited Loading

anil826 commented Feb 12, 2017

aipirvu commented Apr 25, 2016 •

edited

Loading