AngularJs UI-Router - $stateProvider can't read my abstract state

Issue

I have problem with html5Mode. In my MVC project I have only one controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return this.File("index.html", "text/html");
    }
}

In my angular project I have two routes and one abstract.

angular.module('app').config(function ($urlRouterProvider, $stateProvider, $locationProvider) {
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/app/articles');

    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/blocks/layout.html",
            controller: 'AppCtrl'

        })
        .state('app.articles', {
            url: "/articles",
            templateUrl: 'templates/articles.html',
            controller: 'ArticlesCtrl'
        })
        .state('app.one-article', {
            url: "/articles/:articleId",
            templateUrl: 'templates/one-article.html',
            controller: 'OneArticleCtrl'
        });

    // use the HTML5 History API
    $locationProvider.html5Mode(true).hashPrefix('!');   
});

This is in the RouteConfig.cs

public static void RegisterRoutes(RouteCollection routes)
{

    routes.MapRoute(
         name: "articles",
         url: "app/articles",
         defaults: new { controller = "Home", action = "Index" });

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

}

Everything works fine when I'm navigating from the root. But when I will click the refresh button abstract state is not loaded. Please help me how to solve this.

Thanks

Solution

I solved the problem.

My index file was in the root of the solution. Instead of that I removed that index.html file and created MVC view Views -> Home -> Index.cshtml. All HTML is the same as in index.html.

Now from in the controller I'm using

 public ActionResult Index()
    {
        return this.View();
    }

instead of this:

        public ActionResult Index()
        {
             return this.File("index.html", "text/html"); 
        }

Here is my RouteConfig.cs

  public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                         name: "AngularCatchAllRoute",
                         url: "{*any}",
                         defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
                            );
        }

Hope someone will find this article useful.

Bogdan

Answered By - Bogdan Nicovski