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 /?

Chassis

Do you have this issue when you set html5mode to false? – Barrage

I just tested my site with html5Mode set to false like so $locationProvider.html5Mode(false); but the problem persists. – Chassis

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.

Chassis

Just wanted to say that this is so clever yet simple it makes me smile :) – Shinberg

Could it be that there is a much nices solution here: RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^.*$ index.html – Lyman

The only issue with this is that the request is actually returning a 404 response and not a 200, even if it looks like a "good" response. This may cause some unintended behavior, but it does solve the problem you were running in to. – Zolazoldi

Thank you! This is the solution I was looking for. Would never have thought of this. – Janiculum

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.

Lyman

Worked like a charm . Thank you ! – Emersed

Thank you!!!! After searching lot of sites finally I got it from here.its working fine – Hagridden

can you tell me how to add that configuration? is git page can read '.htaccess'? – Herzegovina

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.

Lorilee

I have set html5Mode to false but the problem persists. Refreshing any page but the root results in a 404. What other changes in my config() would I have to make to get this working? – Chassis

Ok I had to wait for the code to update. Now I when I click an internal site link I get a 404 because I took the hash tags # out of my link paths but when I manually enter the hash tag into the URL in the address bar, I can load the page fine. And now when I hit refresh I don't get the 404 page. That is great but the whole point was to prettify my URLs by getting rid of the # hash tag. I asked that question here #17893792 How would I do this? – Chassis

I found a solution that allows one to run a AngularJS app out of Github pages. All pages on my site refresh properly now and I have html5Mode(true) set. Look at my answer. – Chassis

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.

Fillian