$routeProvider / $locationProvider not a function in AngularJS Routing

Question

I'm trying to create so-called 'SEO-friendly' URLs in AngularJS.

In my script.js for the routing I have:

app.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.html5Mode(true);
    when('/blog', {
        templateUrl: 'blog.html',
        controller: 'BlogController'
    }).
    when('/page/ideas', {
        templateUrl: 'ideas.html',
        controller: 'IdeasController'
    }).
    otherwise({
        templateUrl: 'home.html'
    });
}]);

app.controller("BlogController", function($scope) {
    $scope.title = 'Blog';
});

app.controller("IdeasController", function($scope) {
    $scope.title = 'Ideas';
});

To remove the # from the URL, I am enabling the html5 mode with:

$routeProvider.html5Mode(true);

however, this results in the following error:

Failed to instantiate module exampleApp due to: TypeError: $routeProvider.html5Mode is not a function

Does anyone have a solution for this issue? It means that the content will not display from the views because of it.

Edit: for anyone wondering, the working code is:

app.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
        when('/blog', {
            templateUrl: 'blog.html',
            controller: 'BlogController'
        }).
        when('/page/ideas', {
            templateUrl: 'ideas.html',
            controller: 'IdeasController'
        }).
        otherwise({
            templateUrl: 'home.html'
        });
        $locationProvider.html5Mode(true);
    }]);

Filide

Try using the $locationProvider.html5Mode(true); instead. html5Mode is a method of $locationProvider. – Desta

Hmm, now I get: ReferenceError: when is not defined OR ReferenceError: $locationProvider is not defined – Filide

You need to inject $locationProvider in the same way you do with $routeProvider – Desta

Answer 1

html5mode method is available there on $locationProvider provider.

You should include $locationProvider in your config phase to make that dependency available in config block & then enable html5mode for # free URL.

Code

app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {

   //$routerProvider code here

   $locationProvider.html5Mode(true);

}]);

Additionally you have to add <base href="/"> tag on the index.html page

Jamilla

That's perfect! Thank you. – Filide

@JWTomic Glad to help you..Thanks :) – Jamilla

Configuring $locationProvider will remove the hashtag from the application URL but, application will not load correctly. To resolve this, you have to add a base tag in the head section of the index page. <base href="http://yourwebsitebase/" – Wynny

@Wynny thanks for heads up, I added the mentioned thing, Thanks :) – Jamilla

@Wynny may I know where should I? – Jamilla

Also note that the method has a capital M for Mode (html5Mode, not html5mode). I spent more time than I want to admit chasing this down. – Clippard

I used html5Mode itself in the code, I don't understand what I'm missing here ? – Jamilla