$locationProvider.html5Mode(true) 问题答案

【问题标题】：$locationProvider.html5Mode(true) issues$locationProvider.html5Mode(true) 问题
【发布时间】：2015-03-04 16:10:54
【问题描述】：

一直在处理我遇到的一些 $locationProvider 问题。我有一个简单的单页页面。但我收到以下错误：

     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)

我的 app.js 文件非常简单...

    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';
                            }
                        }
                }
            })
            ;
        }
    ]);

我的 index.html 文件中确实设置了 <base href="http://localhost/apps/uiv8/" />。因此，当我注释掉 $locationProvider 代码时，在 # 模式下一切正常。我可以毫无问题地访问 /#/about 等。只要我把 $locationProvider 部件放回去，什么都没有。

关于我的环境的更多信息......我们在这里确实有 asp.net 的 MVC，并且 route.config 正在执行 {*url} 将所有重定向到默认路由，我什至已经走了至于用 url rewrites 修改 IIS 以发送到默认值，但我仍然得到上面的解析错误。

那么，有人知道发生了什么吗？

谢谢，尼克

【问题讨论】：

顺便说一句，我检查了一下，我正在运行 angular、jquery 和 angular-ui-router 的最新版本....也去了那里，以防我过时了。
该错误表明您在调用 .replace() 时调用它时未定义的内容，但您发布的代码未显示 .replace() 的位置正在被调用。
不，不调用 .replace。这几乎是一个开箱即用的例子。经过一些额外的演奏......我发现如果我这样做：<base href='http://localhost/Apps/UIv10 那么它可以工作（A 上的大写字母），但如果我这样做<base href='http://localhost/apps/UIV10 那么它不会。
似乎其他人提到了基本 html 标签区分大小写的问题......人们可以轻松地输入应用程序与应用程序。所以，我想我必须再研究一下。
最终，这就是我为解决该问题所做的工作：stackoverflow.com/questions/21863670/…

标签： angularjs angular-ui-router

【解决方案1】：

在您的索引页面中添加基本标签，例如：

<base href="/">

而不是：

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

希望它能解决你的问题。

【讨论】：

为我解决了。我有<base href="./"> 并删除句号解决了它。

【解决方案2】：

确保 IIS 中的应用程序名称与基本标记中的相同

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

所以请确保您的 IIS 名称是 app/uiv10

或任何您想要的案例组合，但它们必须相同。

【讨论】：