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

1

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;
});

answered Mar 4, 2016 at 2:47

dieuhd

1,3261 gold badge10 silver badges22 bronze badges

Comments

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

0

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>

answered Jan 18, 2018 at 11:29

Projesh Pal

4584 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJS $locationProvider.html5Mode not working on localhost

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related