Question

Angular Ver：5

我正在使用ASP.NET MVC开发一个新项目，并使用它集成了angular 5。该项目工作正常，除了页面刷新产生404页面未找到错误。每当我从浏览器点击刷新或重新加载页面时，都会出现404错误。

我已经对这个Angular页面刷新问题进行了很多教程和讨论，但到目前为止还没有运气。

我正在使用MVC共享视图 _Layout.cshtml 来指定角度lib引用和基本引用，如下所示： -

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <base href="/">

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/bootstrap")

    <script src="~/node_modules/core-js/client/shim.min.js"></script>
    <script src="~/node_modules/zone.js/dist/zone.js"></script>
    <script src="~/node_modules/systemjs/dist/system.src.js"></script>
    <script src="~/Web/systemjs.config.js"></script>
    <script>
        System.import('Web/main.js').catch(function (err) { console.error(err); });
    </script>
</head>
<body>
    @RenderBody()

    @RenderSection("scripts", required: false)
</body>
</html>

请建议我应该在哪里进行更改。

Answer 1

在位于 App_Start 中的RouteConfig中，将路线映射更改为

routes.MapRoute(
     name: "Default",
     url: "{*url}",
     defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

基本上这将捕获您的所有路径路径。

Angular是一个SPA环境，因此您只需要一个View的{{1}}个实例

Answer 2

另一种解决方案是使用IIS Url Rewriting将请求分派给应用程序的根目录，让Angular路由器处理路由。通过放入web.config：

  <rules>
    <rule name="Angular Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>

此网址重写规则会重写为/不以/ api开头且与物理文件或文件夹不匹配的每个网址。

使用Angular的ASP.NET MVC： - 页面刷新或重新加载会产生404错误

2 个答案: