AngularJS ui-router html5mode 无法重新加载

标签 angularjs html angular-ui-router

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

问题:

目前我无法将 html5mode 与 ui-router 一起使用,因为它出现 Not Found 错误。它加载页面的唯一时间是第一次加载。每次刷新或尝试访问特定URL时,都会出现此错误:

The requested URL /Welcome was not found on this server.

我的代码

目前我正在使用 AngularJS 1.5.0ui-router 0.2.15注意:我使用的是一个空白应用程序,在 apache 服务器中只有 2 个主状态和 1 个主状态以及一个子状态。

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 种可能的解决方案:

  • 使用base标签;
  • 在服务器端重写条件;
  • 没有使用base标签(很难找到,但有一些);

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

还有其他链接..但它们都不起作用,总是相同的结果。当我收到不同的错误时,就是这个:

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.

当我尝试使用这样的重写规则时:

<Directory />
    RewriteEngine on

    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    RewriteRule ^ index.html [L]
</Directory>

编辑:

经过一些评论后,我设法让它工作,但仅限于主状态。当我处于子(嵌套)状态并尝试刷新页面时,我收到此错误:

Uncaught SyntaxError: Unexpected token <

Uncaught ReferenceError: angular is not defined

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 状态并刷新页面时,出现错误。

最佳答案

我解决这个问题的方法是更改​​ .htaccess 文件和 index.html 上的一些设置,但更改一些路径。

.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

我必须更改 css 文件的路径并在开头添加 / 。像这样:

<link rel="stylesheet" type="text/css" href="/dist/css/main.min.css">

我照常保留其他配置。

$locationProvider.html5Mode(true); //In the router config file
<base href="/"> //On the index.html just before closing the head tag

关于AngularJS ui-router html5mode 无法重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35019805/

相关文章:

AngularJS angular ui router - 将自定义数据传递给 Controller

routes - 生产区中的 Angular 2 路由

javascript - 将 Annyang.js 语音识别与 Angularjs 集成

javascript - AngularJS - 无法清空输入字段

android - Cordova 闪屏?

Javascript - 重定向到另一个网站并在该页面加载后调用 Javascript 函数

angularjs - Node.js 和 Angular 路由 - 如何使浏览器 URL 无法访问 REST API

angularjs - 不同项目之间的Angular JS模块共享

angularjs - 如何从可重用组件的指令公开公共(public) API?

JavaScript 函数在 iOS 中不起作用