Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Optimal .htaccess configuration for 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 to 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

@realshoaib
Copy link

realshoaib commented Nov 10, 2021

@julianpoemp as i mentioned earlier in my post that my project doesn't possess any backend which is why i can't implement it onto the backend.

I'm trying to accomplish .htaccess implementation in Angular(on frontend) only.
Below is my .htaccess code:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

Kindly guide in this regard.

@julianpoemp
Copy link
Author

julianpoemp commented Nov 10, 2021

@realshoaib I think that your webserver Apache configuration does not allow the mod_expires.c in .htaccess files. Are you sure that you can't use the Cache-Controll header at all? Perhaps you can try the approach described here: https://serverfault.com/a/316330

@realshoaib
Copy link

realshoaib commented Nov 10, 2021

@julianpoemp brother, you're not getting my point at all. I've said I DON'T HAVE ANY WEBSERVER AT ALL. Did you got my point? I need to deal with .htaccess on the frontend side

@julianpoemp
Copy link
Author

julianpoemp commented Nov 10, 2021

@realshoaib you can't use .htaccess without any webserver. Your problem can't be solved without a webserver at all.

@realshoaib
Copy link

realshoaib commented Nov 16, 2021

@julianpoemp Thank you so much for guiding me in regard. I'll definitely be going with the webserver approach.

@UnoRing
Copy link

UnoRing commented Jan 7, 2022

Great job, thanks a lot for sharing!

@benzdouglas
Copy link

benzdouglas commented Mar 24, 2022

Hey Julian, thanks for creating this! It helped me to figure out how to set up an Angular install with a Lumen rest api in a subfolder. I do have one issue that maybe you can help with, and might be a good addition to the generator? I've tried to turn off the Indexes throughout my server but for some reason it still wants to display the index of the api folder. Lumen has it's endpoint in a sub-sub folder /api/public so instead of just ignoring the folder I am rewriting to that directory using:
RewriteRule ^api/(.*)$ /api/public/$1 [L]
And above everything I also added
Options -Indexes
(which I've also added in the apache2.conf file and the sites-available conf file, and for those I also have the +FollowSymLinks after Options).
It shows the index when I go to domain.com/api/ but not when I leave off the trailing / as in domain.com/api so I feel like this is just a small typo - or I'm just going about doing this in the complete wrong way! Any advice?

@julianpoemp
Copy link
Author

julianpoemp commented Mar 24, 2022

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

@benzdouglas
Copy link

benzdouglas commented Mar 24, 2022

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

julianpoemp commented Apr 21, 2022

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

@julianpoemp
Copy link
Author

julianpoemp commented Aug 8, 2022

@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

Ronaldy-Alves commented Aug 29, 2022

Thanks!

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