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.

@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 .