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
– Sumit Agarwal, Commented Sep 2, 2017 at 9:34

Rob · Accepted Answer · 2018-03-29 05:36:17Z

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, 2018 at 5:36

Rob♦

27.5k16 gold badges89 silver badges103 bronze badges

answered Sep 2, 2017 at 7:04

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rob Over a year ago

Please credit your sources, and don't copy content verbatim. stackoverflow.com/questions/35284988/…

skipper21 · Accepted Answer · 2018-03-27 10:28:46Z

2

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, 2018 at 10:28

skipper21

2,4952 gold badges19 silver badges14 bronze badges

Comments

Asanka · Accepted Answer · 2018-04-03 18:06:27Z

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 3, 2018 at 18:06

answered Apr 3, 2018 at 17:54

Asanka

1,6681 gold badge11 silver badges20 bronze badges

1 Comment

Michael Over a year ago

You should include the relevant information in your answer in case that post gets deleted.

Alamgir Hossen · Accepted Answer · 2018-07-31 11:43:50Z

0

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]

answered Jul 31, 2018 at 11:43

Alamgir Hossen

12 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related