15

Recently I have noticed that when using ngRoute module in an AngularJS app, the route contains #! in the URL, which was earlier just the #.

For example, www.webiste.com/#/login becomes www.website.com/#!/login

I have to enable the html5Mode and also disable the requireBase which removes the base as a whole using the code, 

$locationProvider.html5Mode({
       enabled: true,
       requireBase: false
});

and the URL changes to www.website.com/login which works fine but is misleading and is not what Angular SPA URLs look like.

If I do not enable the html5Mode, the URL is encoded and I cannot get around it. So www.website.com/#/login becomes www.website.com/#!/#%2Flogin (Notice the later / is encoded as %2F).

Is this a change implemented by the developers for some specific purpose? What difference does it make? What changes do I need to make to my app to keep it working? Am I doing something wrong?

Github issue: https://github.com/angular/angular.js/issues/15547

Samarth Agarwal
  • 2,044
  • 8
  • 39
  • 79
  • use of hash in url's goes against point of enabling html5Mode...so why are you using hashes at all? As for the hashprefix read docs regarding that – charlietfl Dec 26 '16 at 18:12
  • 2
    somewhere in routing(could be in app.js ), you are setting prefix like this "$locationProvider.hashPrefix('!');". remove "!" – Naghaveer R Dec 26 '16 at 18:14
  • I am not setting anything like that anywhere. I enabled `html5Mode` to get rid of the encoding of the `/` (slashes) in the urls. – Samarth Agarwal Dec 26 '16 at 18:21
  • 3
    See [AngularJS Guide - Migration - aa0077e8](https://docs.angularjs.org/guide/migration#commit-aa077e8). This is a breaking change introduced in AngularJS 1.6 – georgeawg Dec 27 '16 at 03:41

1 Answers1

4

It's called the hash bang.

For a while Twitter was using the same thing. It allows for AJAX calls and let search engines know your path without using a "real" path. It's considered obsolete though.

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

There is another stackoverflow answer about that:

Doing links like Twitter, Hash-Bang #! URL's

Update:

One of the reasons for not having a need for the hash bang anymore is that we can push the history state without a page reload. Something so called "one page" websites, like React, do.

Alexis Wilke
  • 19,179
  • 10
  • 84
  • 156
  • Why am I facing these issues all of a sudden? I have been working on small angular apps for a year now and never ran into these issues. For me the `#` worked fine. Older apps are still working fine, it is the issue with every new app that I create. – Samarth Agarwal Dec 26 '16 at 18:19
  • `www.website.com/login` is probably what you want to make it more search engine friendly, though. But I'm not too sure why it would just all of a sudden add the bang (!). Did you update versions recently? Maybe try a tiny sample started from scratch to make sure that it does that by default? – Alexis Wilke Dec 26 '16 at 18:24
  • 1
    Yes Sir, tried that too. Looks like an update to the module. – Samarth Agarwal Dec 26 '16 at 18:25
  • Then I would suggest a post to their bug list, search there first to see whether someone else is complaining. That being said, I think the bang is necessary if you want the page to be indexed by Google (not that the login page is important, but other pages are.) – Alexis Wilke Dec 26 '16 at 18:29
  • Exactly, I may want to have a completely different page to be loaded at `/login` outside of Angular's SPA which does not seem doable now. – Samarth Agarwal Dec 26 '16 at 18:30