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.
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.
- Place the .htaccess file (below this instruction) next to your app's index.html on your web server.
- If your app is on the root of your domain like https://example.com you don't have to do more steps.
- If your app is not on the root of domain like https://example.com/app/ you have to set the
base-hrefattribute 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
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
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.
- Does your routing work using ng serve locally? If no, then your routing settings are wrong.
- Does your web-server support htaccess files? Some web hoster like gitlab-pages does not support htaccess files.
- Is the .htaccess file placed next to your index.html file?
- Is your app installed in the root of your domain or in a subfolder?
- What is your
base-hrefvalue? 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
Version 1.4.0, last updated on 2020-01-08
Other helpful scripts
There are other scripts I'm using in my Angular projects: