$locationProvider.html5Mode(true) issues

Question

been dealing with some $locationProvider issues that I am stuck on. I've got a simple single page page. But I'm getting the following error:

     TypeError: Cannot read property 'replace' of undefined
        at trimEmptyHash (angular.js:10551)
        at Object.$locationWatch (angular.js:11399)
        at Scope.$get.Scope.$digest (angular.js:14217)
        at Scope.$get.Scope.$apply (angular.js:14488)
        at bootstrapApply (angular.js:1449)
        at Object.invoke (angular.js:4182)
        at doBootstrap (angular.js:1447)
        at bootstrap (angular.js:1467)
        at angularInit (angular.js:1361)
        at HTMLDocument.<anonymous> (angular.js:26065)

My app.js file is pretty simple...

    var app = angular.module('app',
        [
            'ui.router'
        ]
    );

    app.config([
        '$stateProvider',
        '$httpProvider',
        '$locationProvider',
        '$urlRouterProvider',
        function ($stateProvider, $httpProvider, $locationProvider, $urlRouterProvider) {

            $locationProvider.hashPrefix('!');
            $locationProvider.html5Mode(true);

            $stateProvider
            .state('home',
            {
                url: '/',
                views: {
                    'aboutView':
                        {
                            template: function (params) {
                                console.log("home");
                                return 'home';
                            }
                        }
                }
            })
            .state('about',
            {
                url: '/about',
                views: {
                    'aboutView':
                        {
                            template: function (params) {
                                console.log('about')
                                return 'about';
                            }
                        }
                }
            })
            ;
        }
    ]);

I do have the <base href="http://localhost/apps/uiv8/" /> set in my index.html file. So, when I comment out the $locationProvider code, everything works fine in # mode. I can get to /#/about, etc. without issue. As soon as I put the $locationProvider parts back in, nothing.

A little bit more about my environment.... We do have asp.net's MVC in here, and the route.config is doing a {*url} to redirect all to the default route, and I've even gone as far as modifying IIS with url rewrites to send to the default, but I still get the parse Error above.

So, anybody got any ideas what's going on?

Thanks, Nick

BTW, I checked, I am running the most recent versions of angular, jquery, & angular-ui-router.... went there too just in case I was out of date. — Nick Jacobs, Mar 04 '15 at 16:14
The error would suggest that you're calling .replace() on something that's not defined at the time that you're calling it, but the code you posted doesn't show where .replace() is being called. — alex, Mar 04 '15 at 17:05
No, not calling .replace. This is almost an out of the box example. After some additional playing... I found that if i do this: ` — Nick Jacobs, Mar 04 '15 at 19:32
Appears other people have mentioned problems with case sensitivity of the base html tag... One could easily type in Apps versus apps. So, I guess I have to go research that some more. — Nick Jacobs, Mar 04 '15 at 20:03
Ultimately, this is what I did to work around the issue: http://stackoverflow.com/questions/21863670/case-insensitivity-with-angularjs-ui-router — Nick Jacobs, Mar 04 '15 at 20:58
Whoa! I didn't think this would be a case-sensitivity issue - glad you got the problem fixed. — alex, Mar 04 '15 at 21:02

score 2 · Answer 1 · edited Sep 23 '15 at 12:51

2

Add the base tag in your index page like :

<base href="/">

Instead of :

<base href="http://localhost/apps/uiv8/" />

Hope it will solve your problem.

edited Sep 23 '15 at 12:51

bviale

5,245
3
28
48

answered Sep 23 '15 at 12:24

Mohan Raj Nagarajan

33
1
1
8

Solved it for me. I had `` and removing the period solved it. – MTT Apr 02 '16 at 14:50

score 0 · Answer 2 · answered Oct 29 '15 at 19:33

0

Make sure your Application Name in IIS is the same as what is in your base tag

<base href='http://localhost/apps/uiv10'>

so ensure your IIS name is app/uiv10

or whatever combo of case you want, but they need to be the same.

answered Oct 29 '15 at 19:33

Craig Gjerdingen

1,844
1
21
21

$locationProvider.html5Mode(true) issues

2 Answers2

Linked