Optimal .htaccess configuration for Angular 8, Angular 7, Angular 6, Angular 5 (and older) app in production incl. fix for the angular browser caching issue.

.angular-htaccess.md

Optimal htaccess file for angular apps

Angular supports two different routing strategies:

• PathLocationStrategy — the default "HTML5 pushState" style.
• HashLocationStrategy — the "hash URL" style.

If you are using PathLocationStrategy you have to append a .htaccess file to your production server in order to make routing work. For more information about Angular's routing click here.

What is the problem?

If you are using PathLocationStrategy and you are not using a .htaccess file reloading your angular app does not work. For example: Imagine your app navigated to the URL https://example.com/page1/page2 where your app is located on https://example.com/. If you now try to reload your app, it won't work because the webserver does not find the path /page1/page2/ because the path is generated by Angular.

Installation

1. Place the .htaccess file (below this instruction) next to your app's index.html on your web server.
2. If your app is on the root of your domain like https://example.com you don't have to do more steps.
3. If your app is not on the root of domain like https://example.com/app/ you have to set the base-href attribute correctly: Call ng build --base-href /app/ to build your app. Replace /app/ with the path from the root of your domain.

Redirection to https

If you need redirection to https just uncomment the two lines of the REDIRECTION part.

Disable Browser caching

In cases where you are loading custom files (e.g. from the assets folder) that are loaded via XHR request you need to disable browser caching. If you do not disable it your custom assets are cached by the browser and changes are not activated on the user's browser.

To disable browser caching just uncomment the BROWSER CACHINGpart.

Troubleshooting

If you are facing any issues try to answer the following questions. It helps to solve the most problems. If not, post a comment to this gist with the answers to these questions.

1. Does your routing work using ng serve locally? If no, then your routing settings are wrong.
2. Does your web-server support htaccess files? Some web hoster like gitlab-pages does not support htaccess files.
3. Is the .htaccess file placed next to your index.html file?
4. Is your app installed in the root of your domain or in a subfolder?
5. What is your base-href value? If your app is located in a subfolder like https://example.com/awesome/ your base-ref attribute must be /awesome/. If that's not the case, the default value is /.

Contributors

• julianpoemp
• RaschidJFRe

Information

Version 1.4.0, last updated on 2020-01-08

.htaccess

# For instructions and new versions of this Gist go to:
# https://gist.github.com/julianpoemp/bcf277cb56d2420cc53ec630a04a3566
# Version 1.4.0

<IfModule mod_rewrite.c>
	RewriteEngine On

 	# -- REDIRECTION to https (optional):
	# If you need this, uncomment the next two commands
	# RewriteCond %{HTTPS} !on
  	# RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
	# --

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

	RewriteRule ^.*$ - [NC,L]
	RewriteRule ^(.*) index.html [NC,L]
</IfModule>

#------------ BROWSER CACHING (optional)
# Disable browser caching in production. You can add/remove file extension as you wish.
#<FilesMatch "\.(html|htm|js|json|css)$">
#	<IfModule mod_headers.c>
#		FileETag None
#		Header unset ETag
#		Header unset Pragma
#		Header unset Cache-Control
#		Header unset Last-Modified
#		Header set Pragma "no-cache"
#		Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
#		Header set Expires "Mon, 10 Apr 1972 00:00:00 GMT"
#	</IfModule>
#</FilesMatch>
#------------