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 site is on Github Pages. I have a .htaccess file in my gh-pages repo but I have no idea how to configure it to send all paths to the root.

The answer says another thing to consider is using the <base> element like <base href="/" /> but where would I place that? In my index.html? If so at the top or bottom of that file? Also, would I just leave the href value to /?

Answer 1

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.

Answer 2

The better option would be to redirect any url to the index.html:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^.*$ index.html

This will NOT cause a 404 response on any page.

Answer 3

Github pages only serves static files. It won't read any configuration settings you have for Apache in .htaccess.

If you want to run an AngularJS app out of Github pages, you cannot use html5Mode.

Answer 4

I'm running my angularjs application using Nginx on Vagrant. And facing the similar kind of issue. On reloading the browser with any url, it gives me a 404 page.

I have enabled the html5mode in main js file. When you have html5Mode enabled, the # character will no longer be used in your urls. The # symbol is useful because it requires no server side configuration. Without #, the url looks much nicer, but it also requires server side changes.

Here are some changes to do:

• Open nginx configuration file (nginx.conf) in /etc/nginx/sites-enabled folder (path will vary based on your nginx installation directory).
• Find try_files $uri $uri/ =404; and replace it with try_files $uri $uri/ /index.html;
• Save the nginx configuration file
• Restart the nginx sudo service nginx restart

And I have tried to reload the page after doing above changes. It works as expected.