Unable to remove !# from angular routes while using ASP.NET MVC

Question

I am using AngularJS in my MVC application. I am facing the very common routing issue where !# appears in the URLs. I have looked out for solution and found this solution almost in every accepted answer which fails miserably in my case. I have used this line of code inside my routing:

$locationProvider.html5Mode(true).hashPrefix('!');

This line doesn't change anything. I tried this one as well:

$locationProvider.html5Mode(true);

but no luck. Also, I used this tag inside my <head> tag:

<base href="/">

This line doesn't change anything as well.

My routing code and navigation code is given below:

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "payment/MakePayment",
            controller: "paymentController"
        })
        .when("/SearchPayment", {
            templateUrl: "payment/SearchPayment",
            controller: "paymentController"
        })
        .when("/Flush", {
            templateUrl: "payment/InvalidateCacheForIndexAction",
            controller: "paymentController"
        });
    $locationProvider.html5Mode(true).hashPrefix('!');
});

Navigation code-

    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="/">Make Payment</a></li>
            <li><a href="#SearchPayment">Search Payment</a></li>
            <li><a href="#Flush">Flush</a></li>                    
        </ul>
    </div>

When site is launched I see http://localhost:56810/ in browser. When I click on Search Payment link the URL in browser reads http://localhost:56810/#!#SearchPayment. Same thing happens for Flush as well. Also the navigation doesn't take place. That means the change in URLs doesn't get handled by given routeProvider routes.

Salih Şenol Çakarcı · Accepted Answer · 2017-02-05 11:16:42Z

1

Just use

$locationProvider.html5Mode(true).hashPrefix('');

and remove #

<li><a href="SearchPayment">Search Payment</a></li>
<li><a href="Flush">Flush</a></li>

OR

Just use following so that you dont have to configure your server side for only handling "/"

$locationProvider.html5Mode(false).hashPrefix('');

and remove #

<li><a href="SearchPayment">Search Payment</a></li>
<li><a href="Flush">Flush</a></li>

edited Feb 5, 2017 at 11:16

answered Feb 5, 2017 at 10:52

Salih Şenol Çakarcı

2,33015 silver badges23 bronze badges

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

7 Comments

gliese 581 g Over a year ago

I did it. Now I don't see !# in the URL when I click on SearchPayment. However the URL which is displayed in the browser reads "localhost:56810/SearchPayment" and I get an error "404 Not Found". The templateUrl given for this link in the routeProvider is "payment/SearchPayment". Why is it not getting handled by routeProvider? Am I missing something?

Salih Şenol Çakarcı Over a year ago

It gives 404 because your server side handles the routing so Change your server side routing to just handle the "/" route. In NodeJs see my other answer for this . stackoverflow.com/questions/42046583/cant-get-route-angular/…

Salih Şenol Çakarcı Over a year ago

Updated my answer for both case

gliese 581 g Over a year ago

I tried OR part of your answer but the URL still reads: "localhost:56810/#!#SearchPayment"

Salih Şenol Çakarcı Over a year ago

try to manually go to "localhost:56810/#/SearchPayment check if it works

|

Collectives™ on Stack Overflow

Unable to remove !# from angular routes while using ASP.NET MVC

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related