ASP.NET with angularJS fails to load template

Question

I moved my angularJS application from xampp to ASP.NET Visual Studio. When I load my application I got error message that template files could not be found.

I tried several method but none of them worked... Does someone knows where's the problem?

Screenshot of file hierarchy:

here is JS code that includes templates:

app.config(function ($routeProvider) {
    $routeProvider
        .when('/contacts',
            {
                controller: 'ContactsController',
                templateUrl: '"/home/contacts.html'
            })
        .when('/add-contact',
            {
                controller: 'ContactAddController',
                templateUrl: '/home/addContact.html'
            })
        .when('/edit-contact/:contactId',
            {
                controller: 'ContactEditController',
                templateUrl: '/home/editContact.html'
            })
        .when('/display-contact/:contactId',
            {
                controller: 'ContactDetailsController',
                templateUrl: '/home/displayContact.html'
            })
        .otherwise({ redirectTo: '/contacts' });
});

Here is RouteConfig.cs (I leave it as it was when I created new project)

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

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

Answer 1

If you are using the default routing mechanism of ASP.NET (MVCx ?) and ask that app for a url like '/home/contacts.html' ASP.NET will look for a file called HomeController.cs in which it will look for an action called 'contacts.html'.

Because the default pattern is {controller}/{action}/{id}.

Show us your RouteConfig.cs. You may need a rule to bypass the routing of ASP and serve the views as static files to get it working for angular.

I think view folder has a special function in MVC and can not be used to serve static files. Would put the .html files in another kind of static directory and try it from there.

Edit:

If you want go the SPA way simply put your html views inside an seperate folder (e.g.: angularviews) in the ASP project root folder and adjust the RouteConfig.cs like this:

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

        //exclude template folder from routing
        routes.IgnoreRoute("angularviews/{*pathInfo}");

        //add routes for api calls and stuff you need mapped to an asp controller here
        /*
         ...
        */

        //always deliver the main template for all requests
        routes.MapRoute(
            name: "SPA",
            url: "{*catchall}",
            defaults: new { controller = "Home", action = "Index" }
        );

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

Then load your views like 'angularviews/view1.html'