AngularJS: How to remove #!/ (bang prefix) from URL?

Asked 4/1, 2017 at 9:50 Answered 2/1, 2018 at 4:25

Solved angularjs routes angular-ui-router angularjs-1.6

I already have done $locationProvider.html5Mode(true); but it is not working. Whenever I access http://example.com it goes to http://example.com/#!/. Code is given here:

var myApp = angular.module('myApp', ['ui.router', 'ui.bootstrap']);

myApp.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);

myApp.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    // For any unmatched url, redirect to EXTRANET home page
    $urlRouterProvider.otherwise('/');
    // Now set up the states
    $stateProvider
    .state('listrole', {
    url: "/list-role",
    views: {
      'main-content': {
        templateUrl: rootUrl+ 'views/main.html',
        controller: 'rolesCtrl'
      }
    }
    })
    $locationProvider.hashPrefix('');
    $locationProvider.html5Mode(true);
});

Update I added $locationProvider.hashPrefix(''); as well but no difference. Also let me tell you that I am enter address in address bar and hitting enter. Am I doing right? how will browser find that it does not need to refresh from server?

Update #2

Ideally I want URL as http://example.com and http://example.com/#!/list-role to http://example.com/list-role. Right now http://example.com/list-role gives 404

Update #3

I am using nginx proxy, if that helps.

Update #4

Erased Cache. Now I can see http://example.com instead of http://example.com/#! but still http://example.com/list-role gives 404

Joist answered 4/1, 2017 at 9:50 Comment(1)

put $locationProvider.hashPrefix('!'); – Pt 4/1, 2017 at 9:55

If you want to remove this prefix, add this code to your config:

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

Source here for more information.

Update

If you want to remove the whole prefix (# and not only !), you may try this solution:

1) Activate the HTML5 mode and remove the prefix ! in your module config

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

2) And then set base to / in the <head> on your index.html

<head>
    ...
    <base href="/">
</head>

Talbot answered 4/1, 2017 at 10:15 Comment(3)

On refresh it is not working.. I am getting 404 on refresh, – Origami 20/6, 2017 at 13:56

The way you said to remove the whole prefix (# and not only !) didn't work with me – Trouper 8/9, 2019 at 1:48

You saved me so much heartache with this! thank you – Edana 15/2, 2022 at 8:59

Add to your html file <head> <base href="/foldername/"> </head>

and this one is for your app.js $locationProvider.html5Mode(true);

this is for .htaccess create file if you don't have.

RewriteEngine On 
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d  
RewriteRule ^ - [L]
RewriteRule ^ /foldername/

Johnathon answered 11/9, 2017 at 8:59 Comment(0)

Below code will remove exclamatory (!) mark in URL

$locationProvider.hashPrefix('');

or else go to Routing issue with AngularJS project using yeoman setup

it worked for me

Toed answered 4/1, 2017 at 10:2 Comment(2)

It's not working. As soon as I hit F5 for refresh to root URl, it appendsin it – Joist 4/1, 2017 at 10:8

Add it app.js file and add dependency @Joist – Toed 4/1, 2017 at 10:10

Add the following to app.js

app.config(['$locationProvider', function($locationProvider) {

  $locationProvider.hashPrefix('');

}]);

Anting answered 2/1, 2018 at 4:25 Comment(0)

If you are in .NET stack with MVC with AngularJS, this is what you have to do to remove the '#' from url:

1.Set up your base href in your _Layout page:

 <head> <base href="/"> </head>

2.Then, add following in your angular app config :

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

Nettienetting answered 4/1, 2017 at 10:0 Comment(0)

$locationProvider.hashPrefix('');

Please check this question: AngularJS ui-router application has /#!/ in the URL

Foment answered 4/1, 2017 at 10:1 Comment(5)

No need to use symbol (!) in the brackets @Tome – Toed 4/1, 2017 at 10:4

@Toed true. However is duplicate. – Foment 4/1, 2017 at 10:6

@Joist $locationProvider.hashPrefix(''); add this code and am unable to see in your code. – Toed 4/1, 2017 at 10:40

page not found issue – Joist 4/1, 2017 at 11:27

@Joist can you please create a JSFiddle with your code. – Foment 4/1, 2017 at 11:29

Update

Recommended topics

Hot tags