How to route EVERYTHING other than Web API to /index.html

Question

I've been working on an AngularJS project, inside of ASP.NET MVC using Web API. It works great except when you try to go directly to an angular routed URL or refresh the page. Rather than monkeying with server config, I thought this would be something I could handle with MVC's routing engine.

Current WebAPIConfig:

public static class WebApiConfig {     public static void Register(HttpConfiguration config)     {         // Web API routes         config.MapHttpAttributeRoutes();          config.Routes.MapHttpRoute(             name: "DefaultApi",             routeTemplate: "api/{controller}/{id}",             defaults: new { id = RouteParameter.Optional },             constraints: new { id = @"^[0-9]+$" }         );          config.Routes.MapHttpRoute(             name: "ApiWithActionAndName",             routeTemplate: "api/{controller}/{action}/{name}",             defaults: null,             constraints: new { name = @"^[a-z]+$" }         );          config.Routes.MapHttpRoute(             name: "ApiWithAction",             routeTemplate: "api/{controller}/{action}",             defaults: new { action = "Get" }         );     } } 

Current RouteConfig:

public class RouteConfig {     public static void RegisterRoutes(RouteCollection routes)     {         routes.IgnoreRoute("{resource}.axd/{*pathInfo}");         routes.IgnoreRoute(""); //Allow index.html to load         routes.IgnoreRoute("partials/*");          routes.IgnoreRoute("assets/*");     } } 

Current Global.asax.cs:

public class WebApiApplication : HttpApplication {     protected void Application_Start()     {         AreaRegistration.RegisterAllAreas();         GlobalConfiguration.Configure(WebApiConfig.Register);         FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);         RouteConfig.RegisterRoutes(RouteTable.Routes);         var formatters = GlobalConfiguration.Configuration.Formatters;         formatters.Remove(formatters.XmlFormatter);         GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings = new JsonSerializerSettings         {             Formatting = Formatting.Indented,             PreserveReferencesHandling = PreserveReferencesHandling.None,             ReferenceLoopHandling = ReferenceLoopHandling.Ignore,         };     } } 

GOAL:

/api/* continues to go to WebAPI, /partials/, and /assets/ all go to file system, absolutely anything else gets routed to /index.html, which is my Angular single page app.

--EDIT--

I seem to have gotten it working. Added this to the BOTTOM OF RouteConfig.cs:

 routes.MapPageRoute("Default", "{*anything}", "~/index.html"); 

And this change to the root web.config:

<system.web> ...   <compilation debug="true" targetFramework="4.5.1">     <buildProviders>       ...       <add extension=".html" type="System.Web.Compilation.PageBuildProvider" /> <!-- Allows for routing everything to ~/index.html -->       ...     </buildProviders>   </compilation> ... </system.web> 

However, it smells like a hack. Any better way to do this?

Answer 1

Use a wildcard segment:

routes.MapRoute(     name: "Default",     url: "{*anything}",     defaults: new { controller = "Home", action = "Index" } ); 

Answer 2

Suggest more native approach

<system.webServer>     <httpErrors errorMode="Custom">         <remove statusCode="404" subStatusCode="-1"/>         <error statusCode="404" prefixLanguageFilePath="" path="/index.cshtml" responseMode="ExecuteURL"/>     </httpErrors> </system.webServer>