AngularJS 404 Error when page is refreshed

Question

I've been running my AngularJS frontend on a python http.server whilst I've been developing it. I'm running html5mode in my config.js file to remove the /#/ from the url. The problem I'm having is that whenever I refresh a page I get a 404 error, from what I've read it's because my angular pages aren't actually web pages. Just wondering if there's a simple fix to this problem, if anybody can point me in the right direction to fix this issue it'd be much appreciated. I'm currently reading about other ways to host my frontend and fix this issue. Thank you in advance.

You are having this issue is because, after removing `#` , your refresh asks the server to check for the entire path of `url`, which does not exists. — Shashank Vivek, Apr 16 '18 at 11:44
This will surely help you : https://stackoverflow.com/questions/47373927/removing-from-url-of-angularjs-for-seo-with-backend-as-django — Shashank Vivek, Apr 16 '18 at 11:50
I ended up using a custom http server, taken from: http://stackoverflow.com/users/1074592/fakerainbrigand http://stackoverflow.com/questions/15401815/python-simplehttpserver — cminusminus, Apr 28 '18 at 22:59

Shyam Tayal · Answer 1 · 2018-04-16T12:22:09.793

0

The reason can be your app is not able to capture your base url, Try following these steps.

In Router at end add html5Mode(true);

app.config(function($routeProvider,$locationProvider) {

    $routeProvider
    .when('/home', {
      templateUrl:'/html/home.html'
    });
    .otherwise({
      redirectTo: '/'
    });

    $locationProvider.html5Mode(true);
})

In html head add base tag

<html>
<head>
    <meta charset="utf-8">    
    <base href="/">
</head>

.

edited Apr 16 '18 at 12:22

answered Apr 16 '18 at 11:59

Shyam Tayal

486
2
13

Hi Shyam, thank you for your reply. I just tried what you recommended but I still get the error: Error response Error code: 404 Message: File not found. Error code explanation: HTTPStatus.NOT_FOUND - Nothing matches the given URI. – cminusminus Apr 16 '18 at 12:14
I have edited the comment, please make sure you are following the same steps, if still it disn't work send me a jsfiddle , we will sort that out. – Shyam Tayal Apr 16 '18 at 12:23
Thank you Shyam, what do you need in the JSFiddle? I've done what you suggested and I still get the error. I created a server.py file to act as my server, can the re-routing be done in this file? here is my code: import http.server import socketserver PORT = 7000 Handler = http.server.SimpleHTTPRequestHandler httpd = socketserver.TCPServer(("", PORT), Handler) print("serving at port", PORT) httpd.serve_forever() – cminusminus Apr 16 '18 at 12:51

score 0 · Accepted Answer · answered Apr 28 '18 at 23:00

0

I found this to be the solution for me, taken from: http://stackoverflow.com/users/1074592/fakerainbrigand http://stackoverflow.com/questions/15401815/python-simplehttpserver

answered Apr 28 '18 at 23:00

cminusminus

55
6

AngularJS 404 Error when page is refreshed

2 Answers2