Amy bio photo

Amy

freelance front-end web dev, Society 6 creator & travel writer - podcastaholic - IFPA-certified pilates instructor

Email Twitter Github

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.