$locationProvider.html5Mode is not a function

Question

Hey I am trying to enable html5 in my angular project based on this blog but using ui-router https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag and the angular docs

https://docs.angularjs.org/api/ng/provider/$locationProvider

Basically I keep getting an error saying that html5Mode is not a function and it's confusing me as to why.

I have included it in my config file and adapted the urls including a base url. It all works fine but as soon as I add

$locationProvider.html5Mode()

I get an error saying it's not a function. So I guess my question is has the function name changed, am I missing a dependency, and if not why is this not working? In advance thank you for taking the time to help me.

   angular.module('myApp', [
   'ui.router',
   'ui.bootstrap',
    'ngTouch',
    'ngAnimate',
   'myApp.version'

   ]). 
config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $locationProvider) {


    $locationProvider.html5Mode({

        enabled: true

    });

  $stateProvider
      .state('home' , {

        url: '/home',
        templateUrl: 'app/landingPage/landingPage.html'

      })

      .state('landingPage', {

        url: '/landing-page',
        templateUrl: 'app/homePage/homePage.html'


  })



 }]);

Answer 1

You forgot to inject $urlRouterProvider as your second param.