Cross-posting this here from my “Web Musings” blog over at amypeniston.com/web in the hopes that it helps another Angular wannabe.
Problem
How to remove URL # from Angular apps and allow page refreshing.
Solution
Create a .htaccess at root with the following, replacing "sub-folder"
with the name of your parent directory. If you’re app lives at localhost/web server root, you won’t have a parent directory, so remove "/sub-folder"
from the last line, leaving just /index.html
.
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /sub-folder/index.html [NC,L]
Set $locationProvider.html5Mode(true);
in your route config.
Define a base URL in your index.html
that matches your project sub-folder: <base href="/sub-folder/" />
. If at root, your base will be <base href="/" />
.
Read about it in more detail over at the full post.