Valor_ Valor_ - 6 months ago 22
AngularJS Question

$stateprovider throws 404 if i visit link directly from url bar

I'm using ui.router with angularJs and i came across with strange behavior.
If i click trough page everything works as expected, links are changing, templates are loading, but if i visit some specific page directly (other then www.myapp.com) i always get 404 page not found

This is my app.js

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

app.config(function($stateProvider, $urlRouterProvider,$locationProvider){
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
.state('dashboard', {
url: "/dashboard",
templateUrl: "app/templates/dashboard/dashboard.html",
controller: 'dashboardCtrl'
})
.state('locations', {
url: "/locations",
templateUrl: "app/templates/locations/locations.html",
controller: 'locationsCtrl'
})
.state('locations.add_location', {
url: "/locations/add_location",
templateUrl: "app/templates/locations/add_location.html",
controller: 'addLocationCtrl'
});
$locationProvider.html5Mode(true);
});


Explained in pictures


I visit www.myapp.com, page renders
enter image description here

I click on locations, everything is normally working
enter image description here

I can also click on dashboard link again and it will work

But if i press f5 or copy paste link in URL bar of browser, i will get 404
enter image description here


Why is this happening. What im i missing. If you need any additional informations, please let me know and i will provide.

Answer

That's because Apache tries to serve the file location in your www root directory. It's not possible because you have got SPA app without subpages. You have to force Apache web server to rewrite all locations and serve index.html page (main page). I found helpful gist for that: https://gist.github.com/santthosh/7dabf08fa3859361ef1e