ASP.NET MVC with Angular :- 页面刷新或重新加载给出 404 错误

Question

Angular版本：5

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

关于这个Angular页面刷新问题，我已经阅读了很多教程和讨论，但到目前为止还没有成功。

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

  <!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 实例，即您的 HomeController

Answer 2

另一种解决方案是使用 IIS Url 重写将请求分派到应用程序的根目录，让 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>

此 URL 重写规则重写为 / 每个 url 不以 /api 开头，并且与物理文件或文件夹不匹配。

ASP.NET MVC with Angular :- 页面刷新或重新加载给出 404 错误

ASP.NET MVC with Angular :- page refresh or reload gives 404 error

asp.net-mvc

angular

angular-ui-router