Refreshin angular build shows 404 Not Found Error on Apache Server

Question

I am creating ng build --prod in angular 6, and deploying it to the Apache Server. Build works fine but when iam refreshing the page it shows "Not Found". Also iam creating .htaccess file in my root folder...

RewriteEngine On  

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]  
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d  
RewriteRule ^ - [L]


RewriteRule ^ /index.html

Take a look at that : https://stackoverflow.com/questions/18406156/redirect-all-to-index-php-htaccess — , Aug 06 '18 at 11:54

score 1 · Accepted Answer · answered Aug 06 '18 at 13:57

1

One of the possible reason could be that you are deploying in a sub-directory.

Change this line

RewriteRule ^ /index.html

to

RewriteRule ^ /subDirectoryName/index.html

Hope this helps.

answered Aug 06 '18 at 13:57

Faheem

1,105
11
28

You are assuming he is serving the app in a subdirectory, but he never said this. – Christian Benseler Aug 06 '18 at 14:01
I have helped 2 React developers fix 404 issues in past. Both were serving the app in a sub-directory. I'm assuming same with Angular (in this case). – Faheem Aug 06 '18 at 14:04
You shouldn't assume something based on past scenarios. – Christian Benseler Aug 06 '18 at 18:16
Thanks Faheem you assumed right, it really helped me out – fahad ali Aug 07 '18 at 07:57

score -2 · Answer 2 · answered Aug 06 '18 at 13:59

You should read the docs explaining how to deploy an Angular app: Angular deployment.

Routed apps must fallback to index.html

Angular apps are perfect candidates for serving with a simple static HTML server. You don't need a server-side engine to dynamically compose application pages because Angular does that on the client-side.

If the app uses the Angular router, you must configure the server to return the application's host page (index.html) when asked for a file that it does not have.

A routed application should support "deep links". A deep link is a URL that specifies a path to a component inside the app. For example, mysite.com/heroes/42 is a deep link to the hero detail page that displays the hero with id: 42.

There is no issue when the user navigates to that URL from within a running client. The Angular router interprets the URL and routes to that page and hero.

There are examples of configuration for several web servers.

Refreshin angular build shows 404 Not Found Error on Apache Server

2 Answers2