Skip to content

Instantly share code, notes, and snippets.

@julianpoemp
Last active November 11, 2023 19:06
Show Gist options
  • Save julianpoemp/bcf277cb56d2420cc53ec630a04a3566 to your computer and use it in GitHub Desktop.
Save julianpoemp/bcf277cb56d2420cc53ec630a04a3566 to your computer and use it in GitHub Desktop.
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.

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.

@benzdouglas
Copy link

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

@MincDev
Copy link

MincDev commented Apr 21, 2022

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 :)

@julianpoemp
Copy link
Author

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

@julianpoemp
Copy link
Author

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

@MincDev
Copy link

MincDev commented Aug 8, 2022

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

Great stuff! Thanks @julianpoemp!

@Ronaldy-Alves
Copy link

Thanks!

@thmarx
Copy link

thmarx commented Dec 13, 2022

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.

@ajilijihad
Copy link

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

@GreenFlag31
Copy link

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

@alexandrudabija
Copy link

alexandrudabija commented Apr 27, 2023

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

![OnSettings]

![offSettings]

@julianpoemp
Copy link
Author

julianpoemp commented Apr 27, 2023

@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 :)

@alexandrudabija
Copy link

alexandrudabija commented Apr 28, 2023

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

@vitaly-t
Copy link

vitaly-t commented Apr 28, 2023

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

@AbirTarchoun1
Copy link

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 .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment