How to remove # from URL in Angular

When you are developing a ‘Single Page AngularJS application’ and you use ‘ngRoute’ for routing by default, AngularJS routes URLs with a hashtag.


It’s easy to remove that # from the URL and make them pretty. Behind this, I have spent 3 days making functionality work.


You just need to do four things in order to achieve this.

  1. Configure $locationProvider

  2. Set base for relative links

  3. Replace href=”#” with href=”/”

  4. Server-side changes in the apache file.

1. We will use $locationProvider and set html5Mode to true. You can do this while configuring your angular application.

2. Setting Relative links


$location in HTML5 mode requires a <base> tag to be present!

If you configure $location to use html5Mode, you need to specify the base URL for the application with a <base href=’/’>.

3. Remove # as from all the href routing


4. Server-side apache file configurations.

<VirtualHost *:80>

DocumentRoot /var/www/html
<Directory /var/www/html>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted

RewriteEngine on
RewriteRule ^ - [L]

RewriteRule ^ /index.html

LogLevel warn
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined


In this way to get pretty URLs and remove the # in your Angularjs application. The above configuration is for the APACHE server, for Nginx contact us.

Leave a Reply

Your email address will not be published. Required fields are marked *