Removing #! from angular.js Urls in ASP.Net Web API

Question

So I am trying to remove the #! in my angular site and transition to html5. I've looked at other guides and I've implemented them with the locationProvider and base within the index file. The site works fine when you direct it through ng-href to a link but when I press refresh/directly input the url I get a 404 error. I was reading this has to do with the server side in which it does not know where to route when a 404 is hit since the .otherwise() is a hashbang function.

That being said, I looked at the WebApi config and found I already had directed a default routeTemplate if it were to hit a 404 as shown below.

// Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        var jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First();
        jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

Any help would be appreciated

Andre Kraemer · Accepted Answer · 2017-06-09 16:11:58Z

3

As you correctly mentioned, the issue lies on the server side. When you refresh your browser, the AngularJS routing doesn't kick in. Instead the browser issues a request to the server. The server doesn't find anything at the desired location, so it returns a 404.

Your current server side route that you posted in your question just handles requests to your web api.

In addition to the web api route you do have to add an mvc route that delivers your start page.

Assuming that your start page is index.html, add the following routing to your server side route config

//MVC
RouteTable.Routes.Ignore("api/{*url}"); // ignore api routes for mvc
RouteTable.Routes.MapPageRoute("NonAPIRoute", "{*url}", "~/index.html");

if you do already have MVC Routing in place (for example in a class RouteConfig in the App_Start folder), then your RouteConfig class should look similar to this

using System.Web.Mvc;
using System.Web.Routing;

namespace WebApplication1
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("api/{*pathInfo}"); // ignore api routes 
            routes.MapPageRoute("NonAPIRoute", "{*url}", "~/index.html");
        }
    }
}

edited Jun 9, 2017 at 16:11

answered Jun 9, 2017 at 15:59

Andre Kraemer

2,7911 gold badge17 silver badges29 bronze badges

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

6 Comments

Julius Doan Over a year ago

So you are saying I need to add this ignoreRoute prior to providing my mapHttpRoute line? config.Routes.IgnoreRoute(routeName: "DefaultApi", routeTemplate: "api/{controller}/{id}"); // ignore api routes for mvc

Andre Kraemer Over a year ago

The MVC routing is there to respond to a regular get request for a text/html request. Web Api serves data, MVC serves pages. That's the reason why you do need the mvc routing. Another option would be to write an API controller that just returns the content of index.html with a content-type of text/html. Or you could try an url rewrite in your iis config

Julius Doan Over a year ago

So in this case, this would be a mixture of asp.net mvc as well webapi specifically for the routing case.

Andre Kraemer Over a year ago

that's correct. If you don't already have MVC in your web application, you could try an IIS URL rewrite as described in this question stackoverflow.com/questions/12614072/… This assumes that you're hosting your Web API in IIS

Julius Doan Over a year ago

I created a discussion to try to figure out how this can be achieved. I was having troubles after I had inputted the routeConfig file into the API. I believe the issue is that I have seperated my project into 3 seperate projects frontend and backend which result in the ~/index.html path to vary. How would i solve this? chat.stackoverflow.com/rooms/146299/…

|

aorfevre · Accepted Answer · 2017-06-09 15:54:39Z

0

Add a config to your project to enable HTML5 mode and remove prefix

.config(['$locationProvider', function($locationProvider) {
    $locationProvider.hashPrefix(''); // by default '!'
     $locationProvider.html5Mode({
         enabled: true
     });
}]);

answered Jun 9, 2017 at 15:54

aorfevre

5,0744 gold badges23 silver badges54 bronze badges

1 Comment

Julius Doan Over a year ago

Yes I have already done this. As mentioned this works fine, but when you press the refresh page/redirect via inputting the url, it will give you a 404 error.

Collectives™ on Stack Overflow

Removing #! from angular.js Urls in ASP.Net Web API

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related