CODEWITHSUNDEEP
asp.net-mvcangularangular-ui-router
Karan
Karan

Reputation: 3328

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.

Upvotes: 6

Views: 3929

Answers (2)

J.Loscos
J.Loscos

Reputation: 2907

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.

Upvotes: 4

John Velasquez
John Velasquez

Reputation: 3451

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

Upvotes: 8

Related Questions