htaccess redirect for Angular routes
There is a problem if app requested directive
template file, but file is missing. In some case it caused app requested multiple script file in the index.html
.
we should send 404
response instead of index.html
file if file does not exist. So i add simple regex pattern to identify missing file request.
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested pattern is file and file doesn't exist, send 404
RewriteCond %{REQUEST_URI} ^(\/[a-z_\-\s0-9\.]+)+\.[a-zA-Z]{2,4}$
RewriteRule ^ - [L,R=404]
# otherwise use history router
RewriteRule ^ /index.html
A poor man's solution (not using mod_rewrite):
ErrorDocument 404 /index.html
Use a snippet like:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
This will skip to the actual resource if there is one, and to index.html
for all AngularJS routes.