troubleshooting Question

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

Avatar of Tom Knowlton
Tom KnowltonFlag for United States of America asked on
Angular
2 Comments1 Solution3100 ViewsLast Modified:
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 = '';
    });

(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>
ASKER CERTIFIED SOLUTION
Tom Knowlton
Web developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros