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

All you need to do is to modify your apache .htaccess file such that all request serve index.html fie. further routing is done by the angular scripts loaded. — Sumit Agarwal, Sep 02 '17 at 09:34

score 7 · Accepted Answer · edited Mar 29 '18 at 05:36

7

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>

edited Mar 29 '18 at 05:36

Rob

26,989
16
82
98

answered Sep 02 '17 at 07:04

Rahul Singh

19,030
11
64
86

1

Please credit your sources, and don't copy content verbatim. https://stackoverflow.com/questions/35284988/angular-2-404-error-occur-when-i-refresh-through-the-browser/35285068#35285068 – Rob Mar 29 '18 at 05:36

score 1 · Answer 2 · answered Mar 27 '18 at 10:28

1

Try adding query_string in your nginx conf file

location / {
    alias /var/www/my_project/dist/;
    index index.html;
    try_files $uri $uri/ /index.html?$query_string;
}

answered Mar 27 '18 at 10:28

skipper21

2,165
2
16
13

Asanka · Answer 3 · 2018-04-03T18:06:27.830

1

In back-end (server side) just map all (404) error/unrecognized requests to your index (which includes all angular build scripts).then it returns the index. In front-end, u can get what u need.It maps to the page which u need.

eg:- In spring Boot back-end this is an example answer

edited Apr 03 '18 at 18:06

answered Apr 03 '18 at 17:54

Asanka

1,628
1
10
20

You should include the relevant information in your answer in case that post gets deleted. – Michael Apr 03 '18 at 18:24

score 0 · Answer 4 · answered Jul 31 '18 at 11:43

Just put this on .htaccess in root

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html
# to allow html5 state links
RewriteRule ^ index.html [L]

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

4 Answers4