404 on route refresh in angular 4, nginx server and apache

Question

I created a new component in Angular 4 and added its route 'account'. When I run ng serve home page opens and there is a link to account page. On clicking account page link account page opens. If I refresh the page, it works.

The problem is that when I make build with ng build and upload build to apache. If I click on 'account' link the account page opens. But if I refresh or try open account route directly i get 404 error on.

If I add 'use hash', then it works with '#', but I don't want this.

I am using angular 4.2.4

Answer 1

You can check this Link on how to deploy Angular Apps on Apache.

How to Serve index.html in apache

This can be achieved by adding a .htaccess file (in the same directory where the index.html resides) with the following contents.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>