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

.angular-htaccess.md

New generator

I created a new htaccess generator for angular apps that makes it easier for you to create the optimal htaccess file: https://julianpoemp.github.io/ngx-htaccess-generator/

The goal of this generator is to make the configuration process much easier. To make this possible I created a kind of interview mode with some questions. As an additional feature the generator supports adding exclusions for example if you have installed a blog in a subdirectory of your web application.

The generator 😁: https://julianpoemp.github.io/ngx-htaccess-generator/ The project: https://github.com/julianpoemp/ngx-htaccess-generator Place for issues and bug reports: https://github.com/julianpoemp/ngx-htaccess-generator/issues

New updates will be implemented in the generator only.

---

Optimal htaccess file for angular apps (old)

Angular supports two different routing strategies:

• PathLocationStrategy — the default "HTML5 pushState" style. (example: "http://example.com/page1")
• HashLocationStrategy — the "hash URL" style. (example: "http://example.com/#/page1")

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? (old)

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 (old)

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 (old)

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

Disable Browser caching (old)

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
• hgsantana

Information

Version 1.4.0, last updated on 2020-01-08

Other helpful scripts

There are other scripts I'm using in my Angular projects:

• Angular upgrade scripts
• SubscriptionManager

.htaccess

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

<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} [L]
	# --

	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 for all files that don't get a hash string by Angular.
#<FilesMatch "^(?!.*\.([0-9a-z]{20})\.).*$">
#  <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>
#------------