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

Question

My URLs on an AngularJS project have changed from localhost:3000/admin#/ to localhost:3000/admin#!/ since the last time I worked on my project...

Nothing found on the web, does someone know what this is ?

score 77 · Accepted Answer · answered Dec 19 '16 at 15:39

It is new from AngularJS 1.6, which added a new hash prefix.

Due to aa077e8, the default hash-prefix used 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 the URL will become mydomain.com/#!/a/b/c.

Source here for more information.

If you want to remove this prefix, add this code to your config:

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

score 11 · Answer 2 · answered Mar 10 '17 at 07:34

11

Everyone is proposing to remove the prefix, but you could also simply add a ! to client-side URLs (if not using HTML5 mode, which you probably do if you're here).

So in your client-side files, update URLS like this:

#/foo/bar > #!/foo/bar

answered Mar 10 '17 at 07:34

Overdrivr

6,296
5
44
70

How can I read that default prefix so I can use some smart code to add this prefix to URLs if needed? – Naomi Jul 25 '17 at 16:29

score 6 · Answer 3 · answered Dec 19 '16 at 15:39

6

In Angular 1.6.0, the default hashPrefix has been changed to !. See the related commit and the changelog entry.

answered Dec 19 '16 at 15:39

DevDig

1,018
13
19

Luis Armando · Answer 4 · 2023-03-10T15:42:42.887

In my situation, angular 1.6 added a hashtag in this form: http://localhost:52245/#/callback#code=BD55C7FD4F129A9CAC1506E225EF9149

But I needed it in this form: http://localhost:52245/callback#code=BD55C7FD4F129A9CAC1506E225EF9149

I spent some days until find the solution. So added this configuration in the frondEnd web.config, in <system.webServer> section:

    <rewrite>
        <rules>
            <rule name="angular cli routes" stopProcessing="true">
                <match url=".*"/>
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true"/>
                </conditions>
                <action type="Rewrite" url="/"/>
            </rule>
        </rules>
    </rewrite>

After that, all work ok

I think using the `#` to declare route parameters looks a bit awkward. You might want to use a more common route format like `/callback/BD55C7FD4F129A9CAC1506E225EF9149` or `/callback?code=BD55C7FD4F129A9CAC1506E225EF9149` Also here's a great SO answer on different ways to pass parameters into AngularJS routes: https://stackoverflow.com/a/25647714/5567941 — Pierre C., Mar 11 '23 at 12:05

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

4 Answers4

Linked

Related