Angular force an undesired exclamation mark in url

Question

When I click on this : <a href="#/home">home</a> the url is localhost/Sites/App/#!/#%2Fhome

When I click on this : <a href="#!/home">home</a> the url is localhost/Sites/App/#!/home

But this only works on my computer, for my co-workers it's the opposite, the links don't works if there are ! in the url.

I understand the SEO best practices but we don't have a public website, we need to have a website working without exclamation mark in url.

I understand the / in the url are encoded because angular think this is not a path separator but why in my only computer ? We have the same code.

We use IIS or IIS express, Chrome or IE, there are no differences. When it works for me, it does not work for all of the others.

In the browser networks calls we can see there are no server calls between the click on the link and the bad url generation.

This is the module configuration :

angular.module('paper.app', [ 'ngMaterial'
                        , 'ngMessages'
                        , 'ngRoute'
                        , ...])
   .config(function ($routeProvider, $mdThemingProvider, $mdIconProvider, $locationProvider, $mdDateLocaleProvider, contentUrl, contentSvg) {

       $routeProvider
           .when("/", {
               templateUrl: contentUrl + 'view-home/html/home.html',
               controller: 'HomeController',
               controllerAs: 'homeCtrl'
           })
           .otherwise({
               redirectTo: '/'
           });

       $locationProvider.html5Mode(false);

       ...
   });

This is the bower.json :

{
    "name": "...",
    "version": "1.0.0",
    "authors": [
        "..."
    ],
    "ignore": [
        "node_modules",
        "bower_components"
    ],
    "description": "",
    "main": "",
    "homepage": "",
    "dependencies": {
        "angular": "^1.5.7",
        "angular-material": "^1.0.9",
        "angular-route": "^1.5.7",
        "angular-material-data-table": "^0.10.9",
        "moment": "^2.14.1"
      }
}

I have same issue, have you ever found solution for this ? I asked question here http://stackoverflow.com/questions/41211755/i-have-weird-in-angularjs-route-and-all-other-routes-dont-work — Sahbaz, Dec 18 '16 at 23:31
See my answer related to your question [hier](http://stackoverflow.com/a/41551864/3853300)! — Sheki, Jan 09 '17 at 16:11
See my answer related to your question [hier](http://stackoverflow.com/a/41551864/3853300)! — Sheki, Jan 09 '17 at 16:13
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:29

score 32 · Answer 1 · answered Dec 19 '16 at 13:01

32

I solved it by adding this:

$locationProvider.hashPrefix('');

answered Dec 19 '16 at 13:01

FourtyTwo

734
8
19

score 4 · Answer 2 · answered Jul 19 '16 at 10:10

4

//Client side Configuration to pretty url //Remove # from url

$locationProvider.html5Mode(true);

and add this to your index.html <base href="/"></base>

answered Jul 19 '16 at 10:10

gandharv garg

1,781
12
17

I dont want to activate html5Mode, I need to keep the `#` – CrunchyArtie Jul 19 '16 at 11:13

Angular force an undesired exclamation mark in url

2 Answers2

Linked