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

Question

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.

Read How to Ask and provide a minimal reproducible example. The code you show does not reproduce the issue you describe. You're probably modifying the URI through Angular by using the history API? — CodeCaster
– CodeCaster, Commented May 30, 2018 at 10:06

John Velasquez · Accepted Answer · 2018-05-30 10:13:06Z

8

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

edited May 30, 2018 at 10:13

answered May 30, 2018 at 10:04

John Velasquez

3,4512 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CodeCaster Over a year ago

This will indeed capture all routes, which may or may not desirable. Please explain why the OP should do this and what drawbacks it may have.

John Velasquez Over a year ago

I added the explanation

John Velasquez Over a year ago

glad to help :)

J.Loscos · Accepted Answer · 2018-05-30 10:13:18Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related