Getting 404 page on refresh on AngularJS site?

Question

I am getting a served the 404 page whenever I : 1.) refresh any page on my Angularjs site (besides the root page) or 2.) click Back to go from a 404 page to the root page (the root page will be a 404) Here is my `.config()` code ``` 'use strict'; angular.module('mmApp', ['ngResponsiveImages']) .config(function ($locationProvider, $routeProvider) { $locationProvider.html5Mode(true); $locationProvider.hashPrefix = '!'; $routeProvider .when('/', { templateUrl: '/views/design.html', controller: 'MainCtrl' }) .when('/about', { templateUrl: '/views/about.html', controller: 'MainCtrl' }) .when('/contact', { templateUrl: '/views/contact.html', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); }); ``` I have come across this similar question but do not quite understand the answers or how to implement them. AngularJS - Why when changing url address $routeProvider doesn't seem to work and I get a 404 error The accepted answer says to setup Apache to reconfigure all paths to the root. My…

Accepted Answer

I came across a solution here: https://coderwall.com/p/kfomwa

Here's the short post:

angularjs provides html5Mode, which makes your app use pushstate-based URL instead of hashtags. However this requires server side support, since the generated urls need to be rendered properly as well.

This actually works fine with github pages' custom 404 pages, though it's only available for custom domain enabled pages.

First, copy everything inside index.html to 404.html. Then, add this to your app:

```
 angular.module('app', []).config(function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
```

Note that if you are on angular 1.1.5, make sure you set for html5Mode to work properly.

Following these suggestions I was able to get my site working properly. Now when I hit Reload, the page loads properly.

Getting 404 page on refresh on AngularJS site?

Solution

Problem