CODEWITHSUNDEEP
javascripthtmlangularjs
Valor_
Valor_

Reputation: 3591

$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.

Upvotes: 1

Views: 58

Answers (1)

przemod
przemod

Reputation: 459

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

Upvotes: 2

Related Questions