Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular force an undesired exclamation mark in url

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"
      }
}
like image 562
CrunchyArtie Avatar asked Jul 19 '16 09:07

CrunchyArtie


2 Answers

I solved it by adding this:

$locationProvider.hashPrefix('');
like image 167
FourtyTwo Avatar answered Nov 11 '22 13:11

FourtyTwo


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

$locationProvider.html5Mode(true);

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

like image 34
gandharv garg Avatar answered Nov 11 '22 12:11

gandharv garg