AngularJS template reload and page disappears

Question

On my website, if I load a template and then refresh that page, I get a "page not found" error. Is there any way to prevent this?

I can post the code, but I'm not quite sure which piece of code would be valuable. Here is my home page (where the templates are pulled in):

<!DOCTYPE html>
<html data-ng-app="MainApp">
    <head >
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" type="image/x-icon" href="img/computer.ico" />
        <title>Erica Peharda</title>
        <!--angular uses this base element which path to use when it gets any front end resource- this is the root b/c of "/"-->
        <base href='/'>
    </head>

    <body>
        <div class='container1'>
            <div class='page-header'>
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="/">Welcome to EP Web Developing!</a>
                    </div>

                    <!--default menu bar below-->
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/"><i class="fa fa-home"></i>Home</a></li>
                        <li><a href="/about"><i class="fa fa-shield"></i>About Me</a></li>
                        <li><a href="/contact"><i class="fa fa-comment"></i>Contact for a Quote</a></li>
                        <li><a href="/projects"><i class="fa fa-comment"></i>Projects</a></li>
                    </ul>
                </div>
            </nav>


                <h1 class="titleText pull-left">Erica Peharda</h1>
                <!--got code below from mycountdown.org-->
                <div class="countdownContainer pull-right">
                    <noscript>
                        <div align="center" class="noCountdown">
                        </div>
                    </noscript>
                    <script type="text/javascript" src="http://mycalendar.org/calendar.php?cp3_Hex=2D00F9&cp2_Hex=F4EAF9&cp1_Hex=0E0E0F&ham=0&img=&hbg=0&hfg=1&sid=0&fwdt=150&text1=Halloween is on 31st October 2015&group=Holiday&calendar=International&widget_number=3">
                    </script>
                </div>
                <div class="photobanner">
                    <img class="first" src="img/pic1.jpg"/>
                    <img src="img/pic2.jpg"/>
                    <img src="img/pic3.jpg"/>
                    <img src="img/pic4.jpg"/>
                    <img src="img/pic1.jpg"/>
                    <img src="img/pic2.jpg"/>
                    <img src="img/pic3.jpg"/>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <a href="https://twitter.com/epeharda"><img class="twitter" src="img/twitter.png"/></a> <a href="https://www.facebook.com/epeharda"><img class="twitter" src="img/facebook.png"/></a>
                    </div>


                </div>

            </div>
                    <!--the place holder to render our view dependent on the route-->
            <div class="row">
                <div class="col-sm-12" ng-view>


                </div>
            </div>
        </div>

        <script type='text/javascript' src="lib/jquery/dist/jquery.min.js"></script>
                <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
        <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>

        <script type="text/javascript" src="lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
        <script type="text/javascript" src="lib/angular-resource/angular-resource.min.js"></script>
        <script type="text/javascript" src="src/app.js"></script>
        <script type="text/javascript" src="src/controller.js"></script>
        <script type="text/javascript" src="src/factories.js"></script>
        <script type="text/javascript" src="src/filter.js"></script>
        <script type="text/javascript" src="src/style.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href='http://fonts.googleapis.com/css?family=Asap' rel='stylesheet' type='text/css'>

    </body>
</html>

Thanks in advance!!

Here is my router config: angular.module('MainApp',['ngRoute', 'ngResource'])

.config(function($routeProvider, $locationProvider){
    $routeProvider  
        .when('/',{
            templateUrl:'views/home.html',
            contorller: 'HomeController'
        })  
        .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutController'
        })
        .when('/contact',{
            templateUrl: 'views/contact.html',
            controller: 'EmailController'
        })
        .when('/projects',{
            templateUrl: 'views/projects.html',
            controller: 'ProjectController'
        })  
        .otherwise({ redirectTo: '/' });
        //this is incase we need to add the #!
    $locationProvider.html5Mode(
    true);
});

404 is not really related to angular/js but to your server...make sure the page is being served correctly? — timeiscoffee, Jun 19 '15 at 21:05

score 3 · Accepted Answer · edited May 23 '17 at 12:15

3

After I finally narrowed down what I needed to search for, I found this solution:

Still getting 'Not Found' when manually refreshing with angular.js route

It has to do with enabling HTML5 mode. You need to edit the .htaccess file with the following code in order to get the page refresh to re-route to your index.html file:

<IfModule mod_rewrite.c> 
Options +FollowSymlinks 
RewriteEngine On 
RewriteBase / 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_URI} !^/$ 
RewriteRule ^.*$ index.html
</IfModule>

It was the last response on the page (not sure why it didn't get more upvotes- it was the only thing that worked after an exhaustive search).

Thank you everyone!

edited May 23 '17 at 12:15

Community

1
1

answered Jun 21 '15 at 00:21

epurdy

151
1
12

That's a really interesting problem. Thanks for posting your answer!! – Daniel Jamrozik Jun 21 '15 at 04:18
I ran into the exact same problem today with ui routes. My problem was my routes were missing slash ' / ' before them like this `url: "/countries" `. So when I would refresh the page,it sowed me blank page. Silly mistake but If this helps anyone. – Deke Feb 09 '16 at 17:25

score 0 · Answer 2 · answered Jun 19 '15 at 21:48

0

Can you provide your router configuration ? It may happen from html5 mode .If you have configured it.

answered Jun 19 '15 at 21:48

Ashot

1,229
1
12
13

I just updated the code. I do have html5 mode on. Do you think this is the issue? I don't know why it would work on my local host, but not when I upload it to my hosting site (ipage.com). – epurdy Jun 20 '15 at 13:04

score 0 · Answer 3 · answered Jun 19 '15 at 21:53

0

I would also add that this is probably server side. Try to open the javascript console in Chrome and go to the Network tab. (or in any browser for that matter). Look at each line and find the red line that's returning a 404 error. Look at the request url and from there you'll be able to solve the problem if a) that request url is wrong or b) nothing exists at that url.

Here's some info on the debugging within the network tab in Chrome. I recommend as it will solve you a lot of time later!

answered Jun 19 '15 at 21:53

Daniel Jamrozik

1,228
2
11
25

I did this and saw that it was directing to the correct site. It's not getting the angular routes that I put in when it's on another page. I've been emailing back and forth with the support from ipage (I use them for hosting) and this was their response: – epurdy Jun 20 '15 at 13:01
"I was able to replicate issue with website http://epeharda.com/ . Not only 'Contact for a Quote' links , all links in this website after refreshing loading with 'Page not found' error. This is not issue from our server. Issue seems to be scripts for this website. Please correct scripts from your end or contact web developer regarding this issue. We apologize for this inconvenience. " – epurdy Jun 20 '15 at 13:01
Right now it looks like it has to do with the html5 setting and the .htaccess file. Here is a site where I got a lot of great info: http://ericduran.io/2013/05/31/angular-html5Mode-with-yeoman/ It still isn't working, but I will updated when I have a solution. Thanks everyone! – epurdy Jun 21 '15 at 00:04

score 0 · Answer 4 · answered Jun 20 '15 at 13:10

0

You need to configure your server to return /index.html for all text/html 404 errors. Another way to go about this is to copy /index.html as 404.html (or whatever your 404 document is).

answered Jun 20 '15 at 13:10

Andy Gaskell

31,495
6
74
83

Thank you, I will contact iPage to see if I can get that done. I'm considering switching hosting sites- do you think this would solve the issue? This is the first and only hosting site I've used, so I'm wondering if there are better ones out there for Angular. – epurdy Jun 20 '15 at 13:17
If you have an understanding of servers I would go with digital ocean. You are given root access and can build out your server however you like. 5 dollars a month. – Andy Gaskell Jun 20 '15 at 13:20

AngularJS template reload and page disappears

4 Answers4