采用了棱角分明的UI路由器时，使用HTML5模式下启用页面重载失败 [英] Page reload fails when using Angular Ui Router with Html5 mode enabled

问题描述

我使用的角度UI路由器在我的角度应用程序，我都支持HTML5模式通过在配置使用$ locationProvider去除＃形成的URL。

I am using Angular UI Router in my angular app and i have enabled HTML5 mode to remove the # form the URL by using $locationProvider in the config.

var app = angular.module('openIDC', ['ui.router']);
app.config(function($urlRouterProvider, $stateProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'views/home.html',
        controller: 'HomeController'
    })
    .state('login', {
        url: '/login', 
        templateUrl: 'views/login.html',
        controller: 'LoginController'
    })
});

我还设置了＆LT;基本href =//＆GT; index.html文件中标记为好。路由工作正常，我可以浏览网页和＃被删除，但，当我刷新浏览器中使用刷新按钮的页面有一个404错误响应。

I have also set the <base href="/" /> tag in the index.html file as well. The routing works fine and i can navigate to pages and the # is removed but when i refresh the page using the reload button on the browser there is a 404 error response.

这是怎么回事，我怎么能解决这个问题，并有支持HTML5模式有正确的网址

Why is this happening and how can i fix it and have HTML5 mode enabled to have proper URLs

推荐答案

Kasun，认为这正在发生的原因是因为你正试图从你的子途径之一刷新页面（无关与UI的路由器）

Kasun, the reason that this is occurring is because you are trying to refresh the page from one of your sub routes (has nothing to do with ui-router).

基本上，如果请求 www.yourdomain.com / 则可能是您的服务器设置返回 index.html的其中自举您的角度应用程序。一旦应用程序加载，任何进一步的网址更改将 html5Mode 考虑，并通过UI路由器更新网页。

Basically if you request www.yourdomain.com/ you likely have your server setup to return index.html which bootstraps your angular app. Once the app has loaded, any further url changes take html5Mode into consideration and update your page via ui-router.

当您重新加载页面的角应用不再有效，因为它尚未加载，所以如果你要加载的子路径（例如： www.yourdomain.com/someotherpage ），那么你的服务器不知道如何处理 / someotherpage 和可能获得的回报 404 或其他一些错误。

When you reload your page the angular app is no longer valid as it has not loaded yet, so if you are trying to load a sub route (for example: www.yourdomain.com/someotherpage), then your server does not know how to deal with /someotherpage and likely returns 404 or some other error.

您需要做的就是配置您的服务器来回报您的角度为应用程序的所有路线。我主要使用节点/ EX preSS，所以我这样做：

What you need to do is configure your server to return your angular app for all routes. I primarily use node/express, so I do something like:

app.get('*', function(req, res, next) {
    // call all routes and return the index.html file here
}

的注：我通常使用这样​​的事情作为最终的包罗万象的，但是我还包括上面的其它路线之类的请求静态文件，网络爬虫，而需要处理的任何其他特定路线

这篇关于采用了棱角分明的UI路由器时，使用HTML5模式下启用页面重载失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！