Optimal .htaccess configuration for Angular 15, Angular 14, Angular 13, Angular 12, Angular 11, Angular 10, 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 create the optimal .htaccess file for Angular apps easily. By default the generator creates an .htaccess file that solves the route redirection issue. To make it easier for you 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 and more!

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

Questions and discussion

If you have questions you can comment below. Please report bugs here.

hi @benzdouglas, did you also try RewriteRule ^api/?(.*)$ /api/public/$1 [L] ?

You're a genius! That looks to have worked, thanks! Would have taken me a long time to find that missing character

This is awesome. Can you also make it do redirection to www? I had to add this manually, but would save me time if you had this as part of your generator :)

@MincDev nice idea! I'll add it asap 🙂

@MincDev I added an option for redirection to www :)

@MincDev I added an option for redirection to www :)

Great stuff! Thanks @julianpoemp!

Thanks!

Hi, I want to run my Angular 8 app over Apache Tomcat server. But every time I reload then it returns 404 page not found. So, for that, I included the .htaccess file in the folder where my index.html is. But still, it doesn't work because maybe the mod_rewrite is not enabled. My request url is https://ip:port/sso/callback. On tomcat ../webapps/sso, where sso is the app folder which contains all the build files including index.html and .htaccess files. I have set base-href as /sso/ . Please help

tomcat doesn't know htaccess files and doesn't know angular routes. you have to define an error page for 404.

404
index.html

that should work. i used it for an vue app setup.

As far I can understand your "api" folder is next to your index.html of your Angular app? (so "inside" your app folder)

The generator has an option called "Do you want to exclude subdirectories?". Toggle this to "yes". Type in "api" into the textbox and click on the plus icon. This line is going to be added to the .htaccess code:

thank you so much

Thank you, it has been useful ! No documentation to create an .htaccess on Hostinger.

@julianpoemp ,
Hello, without the .htaccess file my site works,
https://examples.md/
.When I add configurations to it, it no longer works

![OnSettings]

![offSettings]

@alexandrudabija Hello, I think setting headers under mod_rewrite doesn't work, you need to set header related code under mod_headers.c. For example:

# Generated with ngx-htaccess-generator v1.2.4
# Check for updates: https://julianpoemp.github.io/ngx-htaccess-generator/

<IfModule mod_headers.c>
  # Set allow Access-Control-Allow-Origin header
  Header set Access-Control-Allow-Origin "*"
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  
  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
  # Redirect all non-file routes to index.html
  RewriteRule ^(?!.*\.).*$ index.html [NC,L]
</IfModule>

Your problem is for sure related to Origin headers. And make sure each command is a one-liner (no line breaks).

One side-note: I'd recommend you to not post screenshots and domain names of real projects. If you have to post information make sure to censor it before posting :)

@julianpoemp , Thank you, my problem was in the build, when I did ng build --configuration --base-href "https://example.md/"
it was giving me an error in the .haccess configuration, I did it as follows:
ng build --base-href /

and I haven't had any problems with the course.
my setup:
**
RewriteEngine On

RewriteRule ^(?!..).$ index.html [NC,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{HTTP_HOST} ^example.md$ [OR]
RewriteCond %{HTTP_HOST} ^www.example.md$
RewriteRule ^/?$ "https://www.example.md/" [R=301,L]

**

and it worked, thanks for the advice!

My battle with the /api redirects, which now includes a proper solution. It was only later on that I found this generator project.

hello , i use hash URL on my angular app ( sever .net ) , but when i add new data , update new data ! but I m obliged to reload the page to see it , i tried different way to refresh but no one work for me ? can any one have a solution for this , thank you .

Is NGINX supported ?

@NavneetVaid nginx is not supported. If you are facing the reloading issue, use HashLocationStrategy: https://v17.angular.io/api/common/HashLocationStrategy

I dont want to use hashLocationStrategy, i want to have my url working without a #

@NavneetVaid you need to change your nginx config:
https://stackoverflow.com/a/47929996/6303600

If you only have access to your app's index.html you can try option 2 from this stackoverflow post:
https://stackoverflow.com/a/53993744/6303600