Exclamation mark after hash (#!) in angularjs app

Question

I have just noticed that I have an exclamation mark after a hash (#!) in all of my routes. I'm not sure how and why I got them because earlier today I didn't have them.

If there is any solution to get rid of them, I would appreciate if someone can explain me what is it( and how I came to have them).

So, the only solution that I have found so far is to put manually put the exclamation mark on every href in my app, but this annoys me and I have no idea what to do.

I generated my app with yeoman generator and my app.js looks like this:

angular
  .module('appNameApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .when('/jaspo', {
        templateUrl: 'views/about.html',
        controller: 'jaspoCtrl',
        controllerAs: 'vm'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Ebsen

you probably have another config somewhere that is setting hashPrefix as well as a meta tag for it also. Are you the same one who had similar issues earlier due to bower install? if so a lot of detail is left out here – Cavil

Hmm where are that details? – Ebsen

Possible duplicate of URL hash-bang (#!/) prefix instead of simple hash (#/) in Angular 1.6 – Profession

Answer 1

Modify these 2 lines :

  .config(function ($routeProvider) {
$routeProvider

to be :

    .config(function ($routeProvider,$locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider

Credit should go to : https://mcmap.net/q/391280/-angular-force-an-undesired-exclamation-mark-in-url

Jade

Thx i will try it, do you know maybe reason why i have ! after # ? Im not familiar with it and have no idea what that mean – Ebsen

! is put into the url to avoid having possible empty hashes like 'url/#' recognized as anchors and make the page go to the top – Jade

Sorry i will accept it once when i test your solution. – Ebsen

Just as a confirmation, this solution works! Thank you for saving me after an hour of not knowing what was wrong! – Bendy

Another benefit is it helps screen readers identify it as a different page where otherwise it will be identified as same page link – Hyunhz

It's been years since you answered this question... but I'm in the middle of an Angular upgrade, moving from old 1.48/5.8 code into the 1.6.x realm, and this suddenly appeared like a plague to me... A nice Google, and I landed here, and your answer saved me so much time and potential headache. If you find yourself in Seattle, the first round is on me. – Hike

Glad to hear. However - like I said - the credits aren't on me, but whoever I've mentioned in my comment :) However if I ever travel 8700km to Seattle I take it :) – Jade

Answer 2

You probably updated angular version from 1.5 to 1.6, because on 1.6, the angular team decided to change the default $location hash-prefix to '!'. Like @Skrew suggested, you can change that to '' with $locationProvider.hashPrefix('');

Here you can read about that.

Vista

Yea that is true, my version is 1.6. Thank you for explanation. – Ebsen

I'm glad i could help you :-)! – Vista

I just love all angular breaking changes <3 – Apostil

Making hash prefix default to ! seems to have been misguided: prior to this change, Google deprecated the suggestion to use #! to make sites crawlable. – Spiritualty

Answer 3

Your function is missing a locationProvider and needs to specify html5Mode for the locationProvider. See https://docs.angularjs.org/api/ng/provider/$locationProvider. Instead of:

.config(function ($routeProvider) { $routeProvider .when('/', {

try:

.config(function ($locationProvider, $routeProvider) { $locationProvider.html5Mode({ enabled:true }); $routeProvider .when('/',{

By default you also need to specify a base tag <base href="/"> in your index.html file.

Razz