Angular routes contain #! in the url instead of # [duplicate]

Question

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

Kozloski

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 – Diaphoretic

somewhere in routing(could be in app.js ), you are setting prefix like this "$locationProvider.hashPrefix('!');". remove "!" – Monogyny

I am not setting anything like that anywhere. I enabled html5Mode to get rid of the encoding of the / (slashes) in the urls. – Kozloski

See AngularJS Guide - Migration - aa0077e8. This is a breaking change introduced in AngularJS 1.6 – Godwit

Answer 1

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.

Cagle

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. – Kozloski

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? – Cagle

Yes Sir, tried that too. Looks like an update to the module. – Kozloski

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.) – Cagle

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. – Kozloski