troubleshooting Question
angular routing - navigate to page works fine, then browser refresh causes 404
Tom Knowlton
asked on
asked on
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\con
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
)
(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:
/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\con
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>
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.
Our community of experts have been thoroughly vetted for their expertise and industry experience.