Get Apache to Serve Angular Routes Even on Browser Reloads
Basically apache does not know anything about your angular application routes so it can’t do much here.
However!
The trick here is to get your apache server to serve index.html file even in page not found situations so that angular then can render the routes.
Here are the steps
Create a file called .htaccess inside of your angular application src folder, and copy the following code to it
RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] RewriteRule ^ /index.html
You need to add this .htaccess file to the assets array in your angular.json so that angular will copy it to your dist folder when you do a production build.
finally, after creating a production build if you copy your application to the apache server everything should work fine, but in case if it does not you may want to do the last step
go to /etc/apache2/apache2.conf inside your server and modify
<Directory /var/www/> Options Indexes FollowSymLinks AllowOverride None Require all granted </Directory>
To look like this
<Directory /var/www/> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory>
If that does not work probably you might not have enabled mod_rewrite
sudo a2enmod rewrite
If you are interested more about angular related articles checkout the angular category