$ routeProvider / $ locationProvider is not a function in AngularJS routing

Question

I am trying to create what are called "SEO-friendly" URLs in AngularJS.

In my script.js for routing, I:

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 # from the URL, I turn on html5 mode with:

 $routeProvider.html5Mode(true); 

however, this results in the following error:

Could not instantiate ExampleApp module due to: TypeError: $ routeProvider.html5Mode is not a function

Does anyone have a solution to this problem? This means that the content will not be displayed from the views because of this.

Edit : for someone interested, working code:

 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 1

html5mode is available at the $locationProvider provider.

You must include $locationProvider in the configuration phase to make this dependency available in the configuration block, and then include html5mode for the # free URL.

code

 app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { //$routerProvider code here $locationProvider.html5Mode(true); }]); 

In addition, you need to add the <base href="/" > tag on the index.html page