ASP.NET MVC with angular routing url issue

Question

I have problem with angular routing and ASP.NET MVC. The problem is with URL.

MVC controller:

[RoutePrefix("BackOffice/Merchants")]
public class MerchantsController : Controller
{
    [Route("Add")]
    public ActionResult Add()
        => View("~/Views/BackOffice/Merchants/View.cshtml");
    [Route("{id}/Edit")]
    public ActionResult Edit(Guid id) // e08c5580-29e3-4429-9c76-b1464f0365ae
        => View("~/Views/BackOffice/Merchants/View.cshtml");
}

Angular app.js

 var app = angular.module("backofficeMerchantsApp", ["ngRoute"]);

app.config(function($routeProvider) {
    $routeProvider
        .when("/",
        {
            template: "<h1>eee</h1>"
        })
        .when("/Add",
        {
            templateUrl: "add.html",
            controller: "addController"
        });
});

And there is problem:

When I enter:

.../BackOffice/Merchants/Add 

The angular loads "/" page. When I enter:

.../BackOffice/Merchants/Add#/Add

The angular loads "/Add" page.

I don't want it. What I have done wrong?

I want to:

When I enter:

.../BackOffice/Merchants 

The angular loads "/" page. When I enter:

.../BackOffice/Merchants/Add

The angular loads "/Add" page.

How to do it?

Answer 1

I was able to figure this out here: Angular Routing with ASP MVC

Hope this helps if you are still having a hard time.