Angular 6 - Page not displaying after refreshing the page

Question

I'm using Angular 6. My application is working fine in local. I have built the code using ng build. I'm using an Ubuntu server. I have uploaded my code to the server and the page also loading.

But when I refresh the page, I'm getting the error below.

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

I have pasted my index.html code.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>WAF</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="assets/images/favicon.png">
</head>
<body>
  <app-root></app-root>
</body>
</html>

And have tried using the .htaccess file also. Getting same problem.

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{SERVER_PORT} 80
RewriteCond %{REQUEST_URI} ^/(.*)$
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

Please help me to fix this. Thanks

danday74 danday74 · Accepted Answer · 2018-09-06T13:08:58

This is a common problem for SPAs (Single Page Apps).

Basically, because this is a SPA there is only one page, namely index.html

You have to configure your prod server to always serve up index.html regardless of the current route / url. The angular dev server does this out the box.

I expect at the moment when you refresh you get a 404 because it can't find /yoururl - it will, by default, be looking for a file in /yoururl/index.html which obviously is totally wrong.

I have never done this on ubuntu server so I can't help you with the configuration but at least now you know what the problem is and how to research it.

Angular 6 - Page not displaying after refreshing the page

1 Answers