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 : stackoverflow.com/questions/18406156/… — user4676340
– user4676340, Commented Aug 6, 2018 at 11:54

Faheem · Accepted Answer · 2018-08-06 13:57:12Z

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 6, 2018 at 13:57

Faheem

1,17611 silver badges29 bronze badges

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

4 Comments

Christian Benseler Over a year ago

You are assuming he is serving the app in a subdirectory, but he never said this.

Faheem Over a year ago

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).

Christian Benseler Over a year ago

You shouldn't assume something based on past scenarios.

fahad ali Over a year ago

Thanks Faheem you assumed right, it really helped me out

Christian Benseler · Accepted Answer · 2018-08-06 13:59:57Z

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.

Collectives™ on Stack Overflow

Refreshin angular build shows 404 Not Found Error on Apache Server

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related