AngularJS ui-router html5mode无法重载 [英] AngularJS ui-router html5mode not working on reload
问题描述
首先，我尝试了一系列不同的解决方案来解决这个问题，但它们都没有对我有用。请参阅下面的链接。
First of all, I've tried a bunch of different solutions to fix this problem, but none of them worked for me. See links below.
目前我无法使用 html5mode 使用ui-router，因为它有 Not Found 错误。它加载页面的唯一时间是第一次加载。每次刷新或尝试访问特定的 URL 时，都会出现此错误：
Currently I can't use html5mode with ui-router because it has a Not Found error. The only time it loads the page, is the first load. Each refresh or trying to access an especific URL, there is this error:
在此服务器上找不到请求的URL /欢迎。
The requested URL /Welcome was not found on this server.
我的代码
目前我正在使用 AngularJS 1.5.0 ，其中 ui-router 0.2.15 。 注意：我在apache服务器中使用的空白应用程序只有2个主要状态和1个具有子状态的主状态。
My code
Currently I'm using AngularJS 1.5.0 with ui-router 0.2.15. Note: I'm using a blank app with nothing more than 2 main states and 1 main state with a child state in an apache server.
html：
<head>
<meta charset="UTF-8" />
<base href="/"></base>
</head>
.config：
$locationProvider.html5Mode(true);
服务器重写：
<ifModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
</ifModule>
我尝试了什么
我在寻找在很多主题/试图解决这个问题。所有这些都指出了3种可能的解决方案：
What I tried
I was looking in a lot of topics/Questions trying to solve this. All of them points out to 3 possible solutions:
- 使用
basetag; - 在服务器端重写条件;
- 不使用
base标签（很难找到，但是有一些）;
- Use
basetag; - Rewrite condition on server side;
- No use of
basetag (hard to find, but there is some);
我尝试了所有这些，遵循这些链接（以及更多）：
I tried all of them, following these links (and much more):
- 使用启用了Html5模式的Angular Ui路由器时页面重新加载失败
- $ location /在html5和hashbang模式/链接重写之间切换
- https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Q uestions＃how-to-configure-your-server-to-work-with-html5mode
- https://github.com/angular-ui/ui-路由器/维基/常见问题#counting-my-assets-and-templates-are-not-loading
- Page reload fails when using Angular Ui Router with Html5 mode enabled
- $location / switching between html5 and hashbang mode / link rewriting
- https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
- https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-assets-and-templates-are-not-loading
和其他链接..但它们都没有工作，总是相同的结果。当我得到一个不同的错误时，就是这个错误：
And others links.. But none of them work, always the same result. When I get a diferent error, it's this one:
内部服务器错误
服务器遇到内部错误或配置错误，无法完成您的请求。
Internal Server Error The server encountered an internal error or misconfiguration and was unable to complete your request.
请与admin @ localhost的服务器管理员联系，告知他们此错误发生的时间以及您在此错误发生之前执行的操作。
Please contact the server administrator at admin@localhost to inform them of the time this error occurred, and the actions you performed just before this error.
服务器错误日志中可能会提供有关此错误的更多信息。
More information about this error may be available in the server error log.
<当我尝试使用这样的重写规则时：
When I try to use the rewrite rule like this:
<Directory />
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
</Directory>
编辑：
经过一些评论后，我设法让它发挥作用，但仅限于主要状态。当我处于子（嵌套）状态，并尝试刷新页面时，我收到此错误：
Edited:
After some comments, I managed to make it work, but only on the main state. When I'm on a child(nested) state, and try to refresh the page, I get this error:
未捕获的SyntaxError：意外令牌<
Uncaught SyntaxError: Unexpected token <
未捕获的ReferenceError：未定义角度
Uncaught ReferenceError: angular is not defined
资源解释为样式表但使用MIME类型文本传输/ html：
Resource interpreted as Stylesheet but transferred with MIME type text/html:
我的州的例子：
.state('contact', {
parent:'app',
url:'/Contact',
views: {
'app': {
templateUrl: 'app/contact.html',
}
}
})
.state('service', {
parent:'app',
abstract: true,
url:'/Service',
views: {
'app': {
templateUrl: 'app/service.html',
}
}
})
.state('service-teste', {
parent:'service',
url:'/Test',
views: {
'service': {
templateUrl: 'app/service_test.html',
}
}
})
当我在 service-test 状态时，我收到错误并刷新页面。
I got the error when I'm on the service-test state and refresh the page.
推荐答案
我解决这个问题的方法是更改 .htaccess 文件以及 index.html ，更改一些路径。
The way I solved this problem was changing some settings on the .htaccess file and also on the index.html, bu changing some paths.
.htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
请注意，必须在我的apache服务器上启用mod_rewrite。默认情况下，它已被禁用。
Note that the mod_rewrite had to be enabled on my apache server. By default it was disabled.
index.html
我必须更改css文件的路径，并在开始时添加 / 。像这样：
I had to change the path for my css files and add a / at the beggining. Like this:
<link rel="stylesheet" type="text/css" href="/dist/css/main.min.css">
我像往常一样保留其他配置。
I kept the other configs as usual.
$locationProvider.html5Mode(true); //In the router config file
<base href="/"> //On the index.html just before closing the head tag
这篇关于AngularJS ui-router html5mode无法重载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
