angular js removing # in routing

Question

I got into a problem in routing that I can't remove # in the url. I have tried all the solutions like using $locationProvider by setting $locationProvider.html5Mode(true).href="/" is not working for me as its taking the directory wrong and all files are missing, so I have used href="./"

But an error keeps coming like Cannot read property 'html5Mode' of undefined kindly provide me a solution. Here's my snippet

var angularMFRP = angular.module('angularMFRP',['ngRoute','angularUtils.directives.dirPagination']);

angularMFRP.config(['$routeProvider','$locationProvider', function($routeProvider, $rootScope,$locationProvider) {
    $routeProvider
		.when('/', {

            templateUrl: 'app/partials/home.html',
            controller: 'home'
        })
        .when('/restaurants', {
			resolve: {

                "check": function($location, $rootScope, $window) {
                    if (!$rootScope.navigates) {
                        $window.alert("please select City");
                        $location.path('/');

                    }

                }
            },
            templateUrl: 'app/partials/restaurants.html',
            controller: 'restaurant'
        })
		.otherwise({
        redirectTo: '/'
    });
	if(window.history && window.history.pushState){
            
         $locationProvider.html5Mode({
                 enabled: true,
                 requireBase: false
          });
        } 
		
		}]);

<!DOCTYPE html>
<html lang="en" ng-app="angularMFRP">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title ng-bind="title"></title>
	<base href="./">
    <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

    <!-- include library script files here -->

          <script src="assets/library/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
    <script src="assets/library/bootstrap.js"></script>
    <script src="assets/library/dirPagination.js"></script>

</head>

But an errors keeps showing like

Error: $injector:modulerr Module Error Failed to instantiate module angularMFRP due to: TypeError: Cannot read property 'html5Mode' of undefined

Also I have used this statement alone too $locationProvider.html5Mode(true) as suggested in all sites,but its not working the error keep coming.Kindly suggest me some solution

you forgot to pass $rootScope as a element of an array in config function. angularMFRP.config(['$routeProvider','$rootScope','$locationProvider', function($routeProvider, $rootScope,$locationProvider) { — Rohìt Jíndal
– Rohìt Jíndal, Commented Oct 19, 2016 at 8:01

Jigar7521 · Accepted Answer · 2016-10-19 08:43:25Z

1

Try this by replacing this line near, in your code :

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

answered Oct 19, 2016 at 8:43

Jigar7521

1,5791 gold badge14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mitul · Accepted Answer · 2016-10-19 08:47:04Z

var angularMFRP = angular.module('angularMFRP', ['ngRoute', 'angularUtils.directives.dirPagination']);

angularMFRP.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'app/partials/home.html',
        controller: 'home'
      })
      .when('/restaurants', {
        resolve: {
          "check": function($location, $rootScope, $window) {
            if (!$rootScope.navigates) {
              $window.alert("please select City");
              $location.path('/');

            }

          }
        },
        templateUrl: 'app/partials/restaurants.html',
        controller: 'restaurant'
      })
      .otherwise({
        redirectTo: '/'
      });
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
  }
]);

Collectives™ on Stack Overflow

angular js removing # in routing

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related