Angular URL's not working but ui-sref does

Question

So this may be a dumb mistake but I have an angularJs application and I have ui-router changing the states. I am able to navigate to the different pages by ui-sref and $state.go() but for some reason if I type the url directly into the browser I get back the error cannot GET .... I have no clue why, but here is the config code and a state setup:

App Config:

.config(function ( $urlRouterProvider, $locationProvider) {

$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/');

});

Items Page component/controller/state config:

(function(){
  'use strict';


angular.module('app')
.component("itemPage",{
templateUrl: 'app/itemPage/itemPage.html',
controller: itemPageCtrl
})
.config(['$stateProvider',function ($stateProvider) {
$stateProvider
  .state('item', {
    url: '/item',
    template: '<item-page></item-page>'
  });
}]);



function itemPageCtrl(){
var ctrl = this;


}


})();

Just to reiterate, if I am the main page of my site and I click a button I can get to items page with ui-sref or $state.go() but if I try to put the url directly in localhost:9000/item or if I am already on the page and click refresh it gives the cannot GET /item message.

Any help will be greatly appreciated and I can give more code if needed. Thank you.

score 0 · Accepted Answer · edited May 23 '17 at 12:32

You should make a config on your server to redirect all requests to the entry point file (usually your index.html), using a .htaccess file for example in Apache.

This question was already made sometimes;

Reloading the page gives wrong GET request with AngularJS HTML5 mode

Configuring on an Apache server: htaccess redirect for Angular routes

Configuring on a Node server: Node.js catch-all route with redirect always renders index page with Angular regardless of url

Angular URL's not working but ui-sref does

1 Answers1