41

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: '/'
      });
  });
Shark Lasers
  • 441
  • 6
  • 15
Sahbaz
  • 1,242
  • 4
  • 17
  • 39
  • 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 – charlietfl Dec 19 '16 at 01:26
  • Hmm where are that details? – Sahbaz Dec 19 '16 at 04:23
  • 1
    Possible duplicate of [URL hash-bang (#!/) prefix instead of simple hash (#/) in Angular 1.6](http://stackoverflow.com/questions/41226122/url-hash-bang-prefix-instead-of-simple-hash-in-angular-1-6) – Mistalis Apr 25 '17 at 11:30

3 Answers3

90

Modify these 2 lines : 

  .config(function ($routeProvider) {
$routeProvider

to be : 

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

Credit should go to : https://stackoverflow.com/a/41223197/1564146

Community
  • 1
  • 1
Skrew
  • 1,768
  • 1
  • 16
  • 17
  • 2
    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 – Sahbaz Dec 19 '16 at 14:37
  • 5
    ! is put into the url to avoid having possible empty hashes like 'url/#' recognized as anchors and make the page go to the top – Skrew Dec 20 '16 at 15:16
  • 1
    Sorry i will accept it once when i test your solution. – Sahbaz Jan 04 '17 at 11:28
  • Just as a confirmation, this solution works! Thank you for saving me after an hour of not knowing what was wrong! – sramzan May 13 '17 at 20:11
  • 1
    Another benefit is it helps screen readers identify it as a different page where otherwise it will be identified as same page link – Dimuthu Jun 12 '17 at 14:29
  • 2
    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. – PKD Feb 08 '19 at 00:00
  • 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 :) – Skrew Feb 09 '19 at 11:58
32

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.

Jonatan
  • 1,096
  • 1
  • 18
  • 28
Sheki
  • 1,597
  • 1
  • 14
  • 25
  • Yea that is true, my version is 1.6. Thank you for explanation. – Sahbaz Jan 09 '17 at 15:58
  • I'm glad i could help you :-)! – Sheki Jan 09 '17 at 16:05
  • 1
    I just love all angular breaking changes <3 – tkit May 26 '17 at 16:07
  • Making hash prefix default to `!` seems to have been misguided: prior to [this change](https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52), Google [deprecated the suggestion to use `#!`](https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html) to make sites crawlable. – z0r May 31 '17 at 01:08
2

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.

wanyo
  • 113
  • 8