Angular HTML5模式路由会导致无法找到资源

Angular HTML5 mode routing gives he resource cannot be found

本文关键字：资源 HTML5 模式 路由 Angular      更新时间：2023-09-26

我正在用angularjs开发。net mvc应用程序。当我不使用html5模式它工作得很好，但当我设置html5模式为真服务器调用该地址给我一个资源找不到。

这是我的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);

});

我的视图(layout):

<!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未找到- http://localhost:39881/test"

我错过了什么

当我试图在应用程序中启用html5模式时，我也面临着同样的问题。后来，当我仔细查看整个代码时，我知道我的API调用的名称和我的路由调用的名称是相同的。浏览器被弄糊涂了，它不是调用路由调用，而是调用api调用。

尝试更改其中一个名称。

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

如果你正在使用Azure和纯ng应用程序，希望能帮助到其他人:

我正在使用Azure和Angular，遇到同样的问题。我使用IIS重写规则将所有请求重定向到index.html文件。

然而，它仍然不能在生产中工作，只能在本地工作。这原来是一个愚蠢的用户错误-我的Angular web应用程序是一个纯HTML/JS应用程序(即。没有ASP。. NET MVC)和Azure发布配置文件没有标记web。配置部署到云。我在Azure上使用Kudu检查web应用程序，没有web。在现场配置，因此重写规则没有被考虑…将其更改为FileType Content解决了这个问题，因此web。配置已经正确部署，路由现在可以工作了。

相关文章：