AngularJS ui-router removing hash on URL

Issue

I am new to AngularJS and ui-router. I want to remove hashtag(#) in my URL and having a problem achieving it.

What I already did are the ff but it only shows blank page and many errors:

  1. Added $locationProvider.html5Mode(true); on my app config
  2. Added <base href="/" /> inside my head tag

Please see below the screenshots and codes:

Code:

var app = angular.module('app', ['ui.router']);

app.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function($locationProvider, $stateProvider, $urlRouterProvider) {
    $urlRouterProvider
    .otherwise('/home');
    
    $stateProvider
    .state('home',{
        url: '/home',
        templateUrl: 'views/home.html'
    })
    .state('about', {
        url:'/about',
        templateUrl: 'views/about.html'
    });
    
    $locationProvider.html5Mode(true);
}]);
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/png" href="{{ favicon }}">
        <title>JKG</title>
        <!-- bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <!-- angularjs -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.19/angular-ui-router.min.js"></script>
        <!-- main links -->
        <link rel="stylesheet" type="text/css" href="sass/main.css">
        <script src="js/app.js"></script>
        <script src="js/controller/mainController.js"></script>
        <base href="/" />
    </head>
    <body>
        <!--MAIN_CONTENT-->
        <main ui-view></main>
    </body>
</html>

Is there something that I have missed? Can someone please help me on this? Thank you in advance.

Solution

depending on the server you are using you may need to write the htacess rule for the application

Answered By – user8453321

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.