Angular Framework Uncategorized
Imal Perera  

Get Apache to Serve Angular Routes Even on Browser Reloads

Spread the love

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

Leave A Comment