AngularJS $locationProvider.html5Mode not working on localhost

Question

I'm trying to get rid of the hashtag that appears in my ui-router URLs. (http://localhost:3000/email doesn't work but http://localhost:3000/#email works. After scouring SO, I haven't found a case that works for me. I'm running locally for now, so I assume I don't need any "Server configuration" and I included "" in my index.html.

(function(angular) { 'use strict'; angular.module('myApp', ['ui.router']) .controller('MainController', function($scope, $route, $routeParams, $location) { $scope.$route = $route; $scope.$location = $location; $scope.$routeParams = $routeParams; }) .config([ ['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider, $locationProvider, $provide) { $urlRouterProvider.otherwise('/email'); // PAGES $stateProvider .state('email', { url: '/email', templateUrl: '../pages/email.html', controller: 'EmailController' }) .state('about', { url: '/about', templateUrl: '../pages/about.html', controller: 'AboutController' }) // ... the rest... $locationProvider .html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK) .hashPrefix('!'); $provide.decorator('$sniffer', function($delegate) { $delegate.history = false; return $delegate; }); }]);

You need to configure your local server as the documentation recommends. — georgeawg
– georgeawg, Commented Mar 4, 2016 at 10:58

Lansana Camara · Accepted Answer · 2016-03-04 02:52:42Z

11

You can either do this in your run block:

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

And your url's will be changed from domain.com/#foo to domain.com/foo (this requires no explicit base).

...or do this in your run block:

$locationProvider.html5Mode(true);

...and then add this to your html <head>:

<base href="/">

This solution provides the same outcome as the first, except that now there is a specified base.

answered Mar 4, 2016 at 2:52

Lansana Camara

9,90112 gold badges54 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Natu Myers Over a year ago

Nothing you guys said is working. I changed the base thing in my head tags, and added what you said to run block. Is it because I'm using Angular Materialize? github.com/krescruz/angular-materialize

Natu Myers Over a year ago

Unfortunately all your answers were great, but I had to choose one. I simply had to just start over from scratch from a new plunker from a scotch.io tutorial plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview and slowly build over that. I literally couldn't trace the problem.

Leon Over a year ago

materialize / jquery don't seem to play nicely with html5mode because certain components rely on #, such as modals and tabs...

Santosh Raju Over a year ago

i have tried this in my code but it is not working for me! can you please help me how to configure this

Lansana Camara Over a year ago

@SantoshRaju This post was years ago, check the version of Angular you're using and make sure this is still compatible.

|

Mr Lister · Accepted Answer · 2016-03-08 21:18:52Z

Perhaps try this code? I think it may be down to one of these reasons.

Config dependencies weren't set correctly (out of order)
That .hasPrefix(!) was put in after a semi-colon.
Also need to assign a base location in your <head> tag using <base href='/'> (or maybe '/email' ?)

angular.module('myApp', ['ui.router'])

.controller('MainController', function ($scope, $route, $routeParams, $location) { $scope.$route = $route; $scope.$location = $location; $scope.$routeParams = $routeParams; }) .config(function ($stateProvider, $urlRouterProvider, $locationProvider, $provide) { $urlRouterProvider.otherwise('/email'); // PAGES $stateProvider .state('email', { url: '/email', templateUrl: '../pages/email.html', controller: 'EmailController' }) .state('about', { url: '/about', templateUrl: '../pages/about.html', controller: 'AboutController' }); $locationProvider.html5Mode(true).hashPrefix('!'); $provide.decorator('$sniffer', function ($delegate) { $delegate.history = false; return $delegate; });

});

Apologies, I can't get the code sample to behave.

dieuhd · Accepted Answer · 2016-03-04 02:47:27Z

Did you set base in HTML-file same as follow:

<html> <head> <base href="/"> </head> </html>

and you should remove .hashPrefix('!'); at config, so this code will same here:

$stateProvider .state('email', { url: '/email', templateUrl: '../pages/email.html', controller: 'EmailController' }) .state('about', { url: '/about', templateUrl: '../pages/about.html', controller: 'AboutController' }) // ... the rest... $locationProvider .html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK) $provide.decorator('$sniffer', function($delegate) { $delegate.history = false; return $delegate; });

Projesh Pal · Accepted Answer · 2018-01-18 11:29:02Z

Your app config will look like this

app.config(function ($routeProvider,$locationProvider) { $locationProvider.html5Mode(true); $routeProvider .when("/", { templateUrl: 'url', controller : 'mainController' }) });

Use tag in your page head

<base href="abc.com/"/>

This may create problem with following href, will not load the page properly

<a href="abc.com/about">About Us</a>

To overcome this use target="_self" in anchor tag as follow

<a href="abc.com/about" target="_self">About Us</a>

Collectives™ on Stack Overflow

AngularJS $locationProvider.html5Mode not working on localhost

4 Answers 4

7 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Related