Solved: angular routing - navigate to page works fine, then browser refresh causes 404

I've been trying to implement a Single Page Application using "routing' in Angular. It works great and injects the html content for whatever page I specify.

/contact

loads the contact page

/forumrules

loads the forum rules page

and so forth and so on.

But, once those pages load, if I do a refresh, I get a 404 page not found, even though the URL has not changed.

My research so far has said something about the fact that the location does not actually physically exist on disk. In other words, a location like

<domainname>/contact

does not mean that a contact sub directory exists. It is simply the result of the routing of the contact.html page to the main page (index.html)

To see this in action you can go to the website online:

http://utahkidsfoundation.com

Then you can click on the Contact menu at the top right of the nav bar (red area near the top)

It should take you to the contact page and the URL will read utahkidsfoundation.com\contact

At this point, if you refresh the page, you will get a 404 page not found.

How do I fix this so I can refresh on a page I've routed to and not have this error?

I'll include the relevant html and JS / controller code here:

spaController.js

(taken from this tutorial I found:

https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

)

var scotchApp = angular.module('scotchApp', ['ngRoute']);

    // configure our routes
    scotchApp.config(function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        
        $routeProvider


            // route for the home page
            .when('/', {
                templateUrl : 'home.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/about', {
                templateUrl : 'about.html',
                controller  : 'aboutController'
            })

            // route for the contact page
            .when('/contact', {
                templateUrl : 'contact.html',
                controller  : 'contactController'
            })

            // route for the events page
            .when('/events', {
                templateUrl : 'events.html',
                controller  : 'eventsController'
            })

             // route for the events page
            .when('/donate', {
                templateUrl : 'donate.html',
                controller  : 'donateController'
            })
            
            // route for the forum rules page
            .when('/forumrules', {
                templateUrl : 'forumrules.html',
                controller  : 'forumrulesController'
            });            
    });

    // create the controller and inject Angular's $scope
    scotchApp.controller('mainController', function($scope) {
        // create a message to display in our view
        $scope.message = '';
    });

    scotchApp.controller('aboutController', function($scope) {
        $scope.message = '';
    });

    scotchApp.controller('contactController', function($scope) {
        $scope.message = '';
    });

    scotchApp.controller('eventsController', function($scope) {
        $scope.message = '';
    });

    scotchApp.controller('donateController', function($scope) {
        $scope.message = '';
    });

  scotchApp.controller('forumrulesController', function($scope) {
        $scope.message = '';
    });

Open in new window

(note: not sure if I am doing the <base .. > meta tag properly. I have a commented-out version right below it which did not work, either)

index.hml (notice at the bottom I have my content area where the individual HTML is loaded in depending on the page chosen:

<!doctype html>

<html ng-app="scotchApp">

<head>
  <title>Utah Kids Foundation</title>

  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

  <script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous">

    </script>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>


  <link type="text/css" rel="stylesheet" href="ukf.css" />
  <script src="ukf.js"></script>

 <base href="/">
<!--
 <base href="/index.html">-->

 <script src="spaController.js"></script>

  
</head>

<body ng-controller="mainController" style="background-color:#eeeeee;">


  <div class="pr fl tz lz">
    <div class="pr fl tz lz cb">
      <div class="pr fl tz lz cb" style="height:300px;">
        <img id="image" src="Images/mainpage/aiden.png" alt="..." class="tz lz w100pc" style="position:absolute;height:300px;"
          class="img-responsive center-block" />
        <div class="pr fl tz lz cb">
          <a href="#"><img id="imglogo" src="Images/mainpage/ukflogo.png" alt="..." class="img-responsive center-block" /></a>
        </div>
        <div class="pr fl tz lz cb w100pc">
          <nav class="navbar navbar-default">
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav" style="margin-left:25%;">
                <li><a href="#">HOME</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">OUR MISSION</a></li>
                    <li><a href="#">MEET OUR BOARD</a></li>
                    <li><a href="#">OUR KIDS IN THE NEWS</a></li>
                    <li><a href="#forumrules">FORUM RULES</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECTS<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">JACKPACKS</a></li>
                    <li><a href="#">MEET OUR UTAH KIDS</a></li>
                    <li><a href="#">MEDICAL SUPPPLY EXCHANGE</a></li>
                    <li><a href="#">EMPTY STOCKING FUND</a></li>
                    <li><a href="#">LIST OF NON-PROFITS</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SPONSORSHIP<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">HOW YOU CAN HELP</a></li>
                  </ul>
                </li>
                <li><a href="#events">EVENTS</a></li>
                <li><a href="#">UTAH KIDS SWAG</a></li>
                <li><a href="#donate">DONATE</a></li>
                <li><a href="#contact">CONTACT</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>

    <div class="pr fl cb w100pc">
      <img id="shadow" src="Images/mainpage/shadow.png" alt="..." class="img-responsive center-block" />
    </div>

  </div>


  <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main" style="width:100%;height:100%;"> 

        <!-- angular templating -->
        <!-- this is where content will be injected -->

        <div ng-view></div>
    </div>
    
</body>

</html>

Open in new window