AngularJS ui-router html5mode 无法重新加载 [英] AngularJS ui-router html5mode not working on reload
问题描述
首先,我尝试了许多不同的解决方案来解决这个问题,但没有一个对我有用.请参阅下面的链接.
问题:
目前我无法将 html5mode
与 ui-router 一起使用,因为它有一个 Not Found
错误.它加载页面的唯一时间是第一次加载.每次刷新或尝试访问特定的 URL
,都会出现此错误:
在此服务器上找不到请求的 URL/Welcome.
我的代码
目前我使用 AngularJS 1.5.0
和 ui-router 0.2.15
.注意:我正在使用一个空白应用程序,它只有 2 个主状态,1 个主状态在 apache 服务器中带有一个子状态.
html:
<meta charset="UTF-8"/><base href="/"></base>头部>
.config:
$locationProvider.html5Mode(true);
服务器重写:
重写引擎开启# 不要重写文件或目录RewriteCond %{REQUEST_FILENAME} -f [OR]RewriteCond %{REQUEST_FILENAME} -d重写规则 ^ - [L]重写规则 ^ index.html [L]</ifModule>
我尝试了什么
我查看了很多试图解决这个问题的主题/问题.他们都指出了 3 种可能的解决方案:
- 使用
base
标签; - 在服务器端重写条件;
- 没有使用
base
标签(很难找到,但有一些);
我尝试了所有这些链接(以及更多链接):
- 使用时页面重新加载失败启用 Html5 模式的 Angular Ui 路由器
- $location/在 html5 和 hashbang 模式之间切换/链接重写
- 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立>
和其他链接..但它们都不起作用,总是相同的结果.当我遇到不同的错误时,就是这个错误:
<块引用>内部服务器错误服务器遇到内部错误或配置错误,无法完成您的请求.
请通过 admin@localhost 联系服务器管理员,告知他们此错误发生的时间以及您在此错误之前执行的操作.
有关此错误的更多信息可以在服务器错误日志中找到.
当我尝试使用这样的重写规则时:
<目录/>重写引擎开启RewriteCond %{REQUEST_FILENAME} -f [OR]RewriteCond %{REQUEST_FILENAME} -d重写规则 ^ - [L]重写规则 ^ index.html [L]</目录>
已
经过一些评论后,我设法使其工作,但仅限于主状态.当我处于子(嵌套)状态并尝试刷新页面时,出现此错误:
<块引用>Uncaught SyntaxError: Unexpected token <
未捕获的引用错误:角度未定义
资源被解释为样式表但使用 MIME 类型 text/html 传输:
我的状态示例:
.state('联系人', {父:'应用程序',网址:'/联系方式',意见:{'应用程序': {templateUrl: 'app/contact.html',}}}).state('服务', {父:'应用程序',摘要:真实,网址:'/服务',意见:{'应用程序': {templateUrl: 'app/service.html',}}}).state('服务测试', {父:'服务',网址:'/测试',意见:{'服务': {templateUrl: 'app/service_test.html',}}})
当我处于 service-test
状态并刷新页面时出现错误.
我解决这个问题的方法是更改 .htaccess
文件和 index.html<上的一些设置/code>, bu 改变一些路径.
.htaccess
重写引擎开启重写基数/重写规则 ^index.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-d重写规则./index.html [L]</IfModule>
<块引用>
请注意,必须在我的 apache 服务器上启用 mod_rewrite.默认情况下它被禁用.
index.html
我不得不更改我的 css 文件的路径并在开始时添加一个 /
.像这样:
我像往常一样保留了其他配置.
$locationProvider.html5Mode(true);//在路由器配置文件中<base href="/">//在关闭head标签之前的index.html
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.
The problem:
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:
The requested URL /Welcome was not found on this server.
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);
server rewrite:
<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>
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:
- Use
base
tag; - Rewrite condition on server side;
- No use of
base
tag (hard to find, but there is some);
I tried all of them, following these links (and much more):
- 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.
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:
Uncaught SyntaxError: Unexpected token <
Uncaught ReferenceError: angular is not defined
Resource interpreted as Stylesheet but transferred with MIME type text/html:
Example of my state:
.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',
}
}
})
I got the error when I'm on the service-test
state and refresh the page.
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>
Note that the mod_rewrite had to be enabled on my apache server. By default it was disabled.
index.html
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屋!