AngularJS ui-router removing hash on URL

Question

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:

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

Please see below the screenshots and codes:

URL with hashtag: Image - before
After apply the steps said above: Image - after

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.

Well, according to your first screenshot, your files are all under `/jkg`. But you've set the base href to `/`. — JB Nizet, Jul 22 '18 at 12:11
this might help https://stackoverflow.com/questions/22102815/how-to-delete-sign-in-angular-ui-router-urls — user8453321, Jul 22 '18 at 12:15
@JBNizet thank you for mentioning that. I forgot to put the base href to /jkg. It worked at first after modifying the bas href but now the problem I am encountering is it shows Error 404 when refreshing the page. — jkg, Jul 22 '18 at 12:45

score 0 · Accepted Answer · answered Jul 22 '18 at 12:17

0

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

answered Jul 22 '18 at 12:17

user8453321

344
1
5
12

I'm using xampp on mac. How do I write htaccess rule? I am really new to this. – jkg Jul 22 '18 at 13:58
Already fixed this problem. Thank you @user8453321 for suggesting to write htaccess rule :) – jkg Jul 22 '18 at 14:15
glad you did i was a bit offline so couldnt really show you a htacess rewrite rule you could use – user8453321 Jul 22 '18 at 14:38

AngularJS ui-router removing hash on URL

1 Answers1