CODEWITHSUNDEEP
angularjsapache.htaccessmod-rewrite
Mike Hanslo
Mike Hanslo

Reputation: 294

Rewrite url for Angular app within sub-folder

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?

Upvotes: 1

Views: 2174

Answers (1)

Mike Hanslo
Mike Hanslo

Reputation: 294

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.

Upvotes: 4

Related Questions