I am facing an issue in my angular page where I am using a $locationProvider. However, it seems to not be functioning correctly on my web page. The console is showing an error message that says "$location in HTML5 mode requires a <base> tag to be present!". In an attempt to fix this, I added a <base href="/" />, but unfortunately, it did not resolve the issue. Below, I have provided details of my directory structure and code snippets.
For reference, here is a link to my sample Project. Any assistance in resolving this problem would be greatly appreciated.
Directory Structure:
iwa (root directory)
> js
> lib
-> angular.js
-> angular.route.js
-> app.js
> views
-> home.html
-> about.html
-> index.html
index.html:
<!DOCTYPE html>
<html ng-app="inQueueWeb">
<head lang="en">
<meta charset="UTF-8">
<script src="js/lib/angular.js"></script>
<script src="js/lib/angular-route.js"></script>
</head>
<body>
<div ng-view></div>
</body>
<script src="js/app.js"></script>
</html>
app.js:
var iwa = angular.module('inQueueWeb', ['ngRoute']);
iwa.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$routeProvider
.when("/", {templateUrl: 'views/home.html'})
.when("/rest", {templateUrl: 'views/about.html'});
$locationProvider.html5Mode(true);
}]);
Additionally, I attempted the following solutions:
$locationProvider.html5Mode({enable: true, requireBase: false});
$locationProvider.html5Mode(true).hashPrefix('!');