AngularJS ui-router html5mode 无法重新加载 [英] AngularJS ui-router html5mode not working on reload

查看：23
本文介绍了AngularJS ui-router html5mode 无法重新加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

首先，我尝试了许多不同的解决方案来解决这个问题，但没有一个对我有用.请参阅下面的链接.

问题:

目前我无法将 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 标签(很难找到，但有一些)；

我尝试了所有这些链接(以及更多链接):

和其他链接..但它们都不起作用，总是相同的结果.当我遇到不同的错误时，就是这个错误:

<块引用>

内部服务器错误服务器遇到内部错误或配置错误，无法完成您的请求.

请通过 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):

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆