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

问题

Angular Ver : 5

I am working on a new project with ASP.NET MVC and have integrated angular 5 with it. The project is working fine except the page refresh yields the 404 page not found error. Whenever i hit refresh from the browser or reload the page, it gives the 404 error.

I have gone through many tutorials and discussions on this Angular page refresh problem, but no luck so far.

I am using the MVC shared view _Layout.cshtml to specify the angular lib references and the base reference as follows:-

  <!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>

Please suggest where should i make the changes.

回答1:

In your RouteConfig located in App_Start change your route mapping to this

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

Basically this will capture all your route paths.

Angular is a SPA environment, so you only need a single instance of a View which is your HomeController

回答2:

Another solution is to use IIS Url Rewriting to dispatch requests to the root of the application to let the Angular router handle the routing. By putting in the 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>

This URL Rewriting rule rewrite to / every url that doesn't start with /api , and that doesn't match a physical file or folder.

来源：https://stackoverflow.com/questions/50601424/asp-net-mvc-with-angular-page-refresh-or-reload-gives-404-error

标签

asp.net-mvc

angular

angular-ui-router