routing "#" issue still occuring angularjs

I have added to my index.html I have added $locationProvider to my app.js

When I click on my button it routes me localhost:20498/register correctly now. However whenever I type localhost:20498/register I still get 400 and when I change url to localhost:20498/#/register I get routed to the page correctly. How do I fix this?

my app.js:

var adminPortal = angular.module("adminPortal", [
"ui.router",
'isteven-multi-select',
"ui.bootstrap",
'ngAnimate',
'ui.mask',

]);

adminPortal.config(["$stateProvider", "$urlRouterProvider","$locationProvider", function ($stateProvider, $urlRouterProvider,$locationProvider) {

$urlRouterProvider.when("", "/home");

$stateProvider
    .state("home", {
        url: "/",
        templateUrl: "js/views/home.html",
        controller: "HomeController"
    })
    .state("register", {
        url: "/register",
        templateUrl: "js/views/register.html",
        controller: "RegisterController"
    })
    .state("user", {
        url: "/user",
        abstract: true,
        templateUrl: "js/views/user.html",
        controller: "UserController"
    })
    .state("user.settings", {
        url: "/settings",
        templateUrl: "js/views/user.settings.html",
        controller: "UserSettingsController"
    })
    .state("tracking", {
        url: "/tracking",
        abstract: true,
        templateUrl: "js/views/tracking.html",
        controller: "TrackingController"
    })
    .state("tracking.fullMap", {
        url: "/fullMap",

        templateUrl: "js/views/tracking.fullMap.html",
        controller: "TrackingFullMapController"
    })
    .state("dispatchOrder", {
        url: "/dispatchOrder",
        abstract: true,
        templateUrl: "js/views/dispatchOrder.html",
        controller: "DispatchOrderController"
    })
    .state("dispatchOrder.edit", {
        url: "/edit/:orderId",

        templateUrl: "js/views/dispatchOrder.edit.html",
        controller: "DispatchOrderEditController"
    })
    .state("dispatchOrder.search", {
        url: "/search",

        templateUrl: "js/views/dispatchOrder.search.html",
        controller: "DispatchOrderSearchController"
    })
    .state("dispatchOrder.tile", {
        url: "/searchTile",

        templateUrl: "js/views/dispatchOrder.search.tile.html",
        controller: "DispatchOrderSearchController"
    })
    .state("dispatchOrder.archive", {
        url: "/archive",

        templateUrl: "js/views/dispatchOrder.search.html",
        controller: "DispatchOrderSearchController"
    })
    .state("dispatchOrder.available", {
        url: "/available",

        templateUrl: "js/views/dispatchOrder.search.html",
        controller: "DispatchOrderSearchController"
    })
    .state("dispatchOrder.queue", {
        url: "/queue",

        templateUrl: "js/views/dispatchOrder.search.html",
        controller: "DispatchOrderSearchController"
    })
    .state("hauler", {
        url: "/hauler",
        abstract: true,
        templateUrl: "js/views/hauler.html",
        controller: "HaulerController"
    })
    .state("hauler.edit", {
        url: "/edit/:haulerId",

        templateUrl: "js/views/hauler.edit.html",
        controller: "HaulerEditController"
    })
    .state("hauler.search", {
        url: "/search",

        templateUrl: "js/views/hauler.search.html",
        controller: "HaulerSearchController"
    })
    .state("broker", {
        url: "/broker",
        abstract: true,
        templateUrl: "js/views/broker.html",
        controller: "BrokerController"
    })
    .state("broker.edit", {
        url: "/edit/:brokerId",

        templateUrl: "js/views/broker.edit.html",
        controller: "BrokerEditController"
    })
    .state("broker.search", {
        url: "/search",

        templateUrl: "js/views/broker.search.html",
        controller: "BrokerSearchController"
    });

$locationProvider.html5Mode(true);

}])

please help!