JWDev JWDev - 2 months ago 7
AngularJS Question

$routeProvider / $locationProvider not a function in AngularJS Routing

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

Answer

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