AngularJS SPA routing getting URL as "/#!" instead of "#"

Question

In my SPA AngularJS application, I am getting the URL as http://localhost:4200/#!/ instead of just # (hash bang). Because of this the routing does not seem to work in the usual way. I did go through this stackoverflow Question but did not find any solution.Anybody knows the solution to get rid of this extra exclamation mark?

EDIT: In my index.ejs: I have <a href="#about">about</a>

In my approutapp.js: I have

var myapp = angular.module("myApp", ["ngRoute"]);
myapp.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "/static/list.ejs"
    })
    .when("/about", {
        templateUrl : "/static/about-us.ejs"
    })

});

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

But the URL which I am still getting: http://localhost:4200/#/!/

and going to http://localhost:4200/about the page hangs

how is it not working? can you provide a [mcve] of the issue for review? — Claies, Jun 11 '17 at 05:57
the url `/#/!/` is not the same as `/#!`; this looks like it might be something on your server, not angular. — Claies, Jun 11 '17 at 06:06
Before adding `$locationProvider.hashPrefix('');` I got `http://localhost:4200/#!/`. After adding the solution provided in the post which you marked as duplicate, I am getting `http://localhost:4200/#/!/` — Kshri, Jun 11 '17 at 06:09
Oh yes! Looks like something from my server side. Tried to run this alone without server and it looks fine — Kshri, Jun 11 '17 at 06:15
@Pritam,No actually the issue seems to be somewhere else. But thanks for an attempt to help. That's why I have voted up :) — Kshri, Jun 11 '17 at 06:54

score 3 · Accepted Answer · answered Jun 11 '17 at 05:47

Try using $locationProvider.hashPrefix('')

The reason is:

If the browser is HTML5 browser angularJS will redirect it to #!

Otherwise it will be only #.

Read this documentation on $location to find out more on this:

Opening a regular URL in a legacy browser -> redirects to a hashbang

URL Opening hashbang URL in a modern browser -> rewrites to a regular URL

HTML5 mode

In HTML5 mode, the $location service getters and setters interact with the browser URL address through the HTML5 history API. This allows for use of regular URL path and search segments, instead of their hashbang equivalents. If the HTML5 History API is not supported by a browser, the $location service will fall back to using the hashbang URLs automatically. This frees you from having to worry about whether the browser displaying your app supports the history API or not; the $location service transparently uses the best available option.

Opening a regular URL in a legacy browser -> redirects to a hashbang URL Opening hashbang URL in a modern browser -> rewrites to a regular URL Note that in this mode, AngularJS intercepts all links (subject to the "Html link rewriting" rules below) and updates the url in a way that never performs a full page reload.

score 0 · Answer 2 · answered Jun 11 '17 at 06:59

This change can be observed in angular version > 1.6.x. In previous version it was like just # (hash bang) only. To get url like # way only, you can simply write in this way,

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

This change was introduced in version 1.6.0, which you can see https://github.com/angular/angular.js/blob/master/CHANGELOG.md#location-due-to.

Also, adding here what is written there:

The hash-prefix for $location hash-bang URLs has changed from the empty string "" to the bang "!". If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a "!" prefix. For example, rather than mydomain.com/#/a/b/c will become mydomain.com/#!/a/b/c.

AngularJS SPA routing getting URL as "/#!" instead of "#"

2 Answers2