Question

我有一个问题，只要我和$ locationProvider.html5Mode（true）;到我的应用程序，它不再遵循routeProvider中定义的otherWise方法。它不是返回404页面，而是显示如下错误页面：

无法获取/ myWrongURL

app.js

angular
  .module('myApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .when('/projects', {
        templateUrl: 'views/projects.html',
        controller: 'ProjectsCtrl',
        controllerAs: 'projects'
      })
      .when('/contact', {
        templateUrl: 'views/contact.html',
        controller: 'ContactCtrl',
        controllerAs: 'contact'
      })
      .otherwise({
        redirectTo: '404.html'
      });
      // use the HTML5 History API
      $locationProvider.html5Mode(true);
  });

我使用Yeoman角度模板来构建我的应用程序，除了我设置的量角器测试之外，此时几乎所有东西都是开箱即用的。

Answer 1

我想，消息

无法获取/ myWrongURL

是服务器问题。

Angular $ location html5模式仅解决客户端设置 - url不包含＃和位置控件也是URL中的路径部分。

Html5模式需要服务器端配置。每个请求都必须返回应用程序入口点 - 通常是index.html。您的服务器按路径路径搜索文件，而不是返回索引 - 这就是您看到错误的原因。

Answer 2

这是grunt服务器的问题（谢谢@milanlempera）。对于任何寻找解决方案的人，我在Kryx回答他自己的问题here时找到了它。

如果其他人偶然发现这是修复：

（添加的唯一一行是modRewrite行）

livereload: {
    options: {
        open: true,
        middleware: function (connect) {
            return [
                modRewrite(['^[^\\.]*$ /index.html [L]']),
                connect.static('.tmp'),
                connect().use(
                    '/bower_components',
                    connect.static('./bower_components')
                ),
                connect.static(appConfig.app)
            ];
        }
    }
},

确保您在grunt文件的顶部声明了以下内容：

var modRewrite = require('connect-modrewrite');

我唯一能做的就是你需要通过npm安装modrewrite，如下所示：

npm install connect-modrewrite --save-dev

Angular - $ locationProvider.html5Mode（true）阻止routeProvider的otherWise方法

2 个答案: