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

Karan

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.

John Velasquez

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

React Js application on page refresh/reload gives error

ASP.NET MVC 5 - Error Handle for - 404 Page not found

Angular 2 routing issue - 404 error on refresh or reload

VueJs page gives 404 on refresh

HTTP ERROR : 405(This page isn't working) When I Refresh The Page(ASP.Net Core MVC)

Angular.js in ASP.Net MVC -- need to reload page twice

In Angular 7 i got 404 Error When reload the page

IN asp.net MVC project, accessing HTML page in subdirectory returns 404 error

404 Error on page refresh with Angular 7, NGINX and Docker

ASP.NET MVC RedirectToAction does not refresh the page

App Engine on page refresh gives 404 for my angular2 project?

angular html5mode in tomcat apache 8.5.4 gives 404 on page refresh

ASP.NET MVC 4 Custom 404 Page

Displaying a 404 Not Found Page for ASP.NET Core MVC

How do I refresh the page in ASP.NET? (Let it reload itself by code)

Adding BaseController in asp.net mvc gives Error

Angular : Get `404` after reload with `GitHub` page

HTTP ERROR 404 when reload page

Encrypted String originates 404 error in ASP.NET MVC

404 error for any action with asp.net core MVC

Routing issue in Asp.net MVC (404 Error)

Getting error 404 not found with ASP.NET MVC Area routing

ASP.NET MVC API PUT getting 404 error

Server error in application '/'. HTTP 404. MVC ASP.NET

asp.net mvc + routelink get only 404 error

Refresh URL on custom 404 error page

Angularjs get error 404 while page refresh

ASP.NET MVC Controller causing page reload when uploading a Blob

angular.js routing 404 not found error in asp.net