Rewrite url for Angular app within sub-folder

Question

I've got an Angular app using html5mode, but it's currently sitting within a sub-folder of a site: http://somesite.com/za/

So I've managed to rewrite the url to direct to my assets folder correctly, but I'm still getting 404s when I hit refresh or navigate directly to a page.

So this works: http://somesite.com/za/assets/js/bundle.js

This doesn't work, 404: http://somesite.com/za/home

.htaccess

RewriteEngine On
#This apparently creates a redirect loop for angular
RewriteRule ^(.*)/$ /$1 [L,R=301] 

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(za/.*) /za/index.html [NC]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(?:[^/]*/)*([^/.]+\.(?:jpe?g|gif|bmp|png||css|js))$ za/assets/$1 [R=301,L,NC]

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

So where is the rewrite failing to redirect to index.html when I hit or refresh a page?

I don't think you need a rewrite rule you only need to set the base tag in the head of your HTML: <base href="/za/" /> — michelem
– michelem, Commented Dec 8, 2015 at 7:52

Mike Hanslo · Accepted Answer · 2015-12-08 09:30:28Z

4

Solved it with a more elegant rewrite rule:

RewriteEngine on
   RewriteCond %{REQUEST_FILENAME} -s [OR]
   RewriteCond %{REQUEST_FILENAME} -l [OR]
   RewriteCond %{REQUEST_FILENAME} -d
   RewriteRule ^.*$ - [NC,L]

   RewriteRule ^(.*) /za/index.html [NC,L]

However, this does give read access to other files and directories, so it can have security issues.

answered Dec 8, 2015 at 9:30

Mike Hanslo

2943 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rewrite url for Angular app within sub-folder

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related