Menu
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.
277
ASP.NET MVC AngularJS | What is ASP.NET MVC with AngularJS? ASP.NET MVC AngularJS is the Frontend JavaScript and it is the structural MVC Framework that is used to build dynamic web applications.
When you are on any route different from / (for example /home, /products/1234) and you refresh the page, a 404 error appear. It should go to the route. I think i because de new Router comes with the HTML5 mode enable by default, but I'm trying to switch back to the HashLocation mode and I simply can't. And well the documentation is way out of date.
this likely can be fixed quickly by simply using the useHash: true flag. For some unknown reason angular does not default this setting to true. Make sure your app-routing-module.ts file contains useHash like this: @NgModule ( { imports: [RouterModule.forRoot (routes, { useHash: true })], exports: [RouterModule] })
To my surprise, both the request path and parameters persist when refreshing. This is in an IIS 10 environment with Angular 9, and a Chrome-only (internal app) so there may be other factors at play that I'm unaware of that are only making this seem sustainable.
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
58
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
