Angular HTML5 模式路由导致找不到资源答案

【问题标题】：Angular HTML5 mode routing gives he resource cannot be foundAngular HTML5 模式路由导致找不到资源
【发布时间】：2015-10-16 09:14:44
【问题描述】：

我正在使用 angularjs 在 .net mvc 中开发应用程序。当我不使用 html5 模式时，它工作正常，但是当我将 html5 模式设置为 true 时，服务器调用该地址给我一个找不到资源。

这是我的 app.js

var app = angular.module("myApp", ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/test',
    {
        templateUrl: 'templates/TestPage.html',
        controller: 'ProfesionalController'
    });

    $routeProvider.otherwise({ redirectTo: '/' });

    $locationProvider.html5Mode(true);


});

这是我的观点（布局）：

<!DOCTYPE html>

@Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/angular/angular.js"></script>
<script src="~/Scripts/angular/angular-route.js"></script>


<script src="~/app/app.js"></script>
<script src="~/app/home/home.js"></script>
<script src="~/app/profesional/profesional.js"></script>
<base href="/">

         <a href="test">Test</a>
         @*this is the link*@

        </div>
    </div>
</div>
<div ng-app="myApp" class="container body-content">
    <div ng-view></div>
    @RenderBody()

</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

当我点击测试链接时，服务器尝试定位： http://localhost:39881/test" 给我一个 404 Not Found - http://localhost:39881/test"

我错过了什么。它在没有 html5 模式的情况下运行良好。

【问题讨论】：

您是否为 html5mode 配置了服务器？您阅读过 html5mode 的文档吗？
是的，我读过，但我不确定我必须做什么
我尝试使用这个但仍然不起作用
在搜索引擎中为 IIS 找到正确的配置应该不难。也使用基本标签
您需要配置您的服务器，以便它以index.html 响应所有请求（图像、css、js 文件等静态资源除外）。

标签： javascript asp.net-mvc angularjs html

【解决方案1】：

当我尝试在我的应用程序中启用 html5 模式时，我也遇到了同样的问题。后来仔细看整个代码，才知道我的API调用的名字和路由调用的名字是一样的。浏览器感到困惑，而不是调用路由调用，而是调用 api 调用。

尝试更改其中一个名称。它应该可以正常工作。

【讨论】：

【解决方案2】：

您需要配置服务器端重写，以便它不会尝试在该路径加载页面。在此处查看您的服务器类型的详细信息：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

【讨论】：

【解决方案3】：

如果您正在使用 Azure 和纯 ng 应用程序，这会花费我很多时间，希望能对其他人有所帮助：

我正在使用 Azure 和 Angular 并遇到了同样的问题。我有 IIS 重写规则，可以根据 ng 中的 documentation 将所有请求重定向到 index.html 文件。

但是，它仍然无法在生产中运行，只能在本地运行。结果证明这是一个愚蠢的用户错误——我的 Angular webapp 是一个纯 HTML/JS 应用程序（即没有 ASP.NET MVC），Azure 发布配置文件没有将 web.config 标记为部署到云。我在 Azure 上使用 Kudu 来检查 webapp，并且没有实时 web.config，因此没有考虑重写规则......将其更改为 FileType Content 解决了问题，因此 web.config 已正确部署并且现在路由工作..

【讨论】：