angularjs.htaccesshashhtml5mode

How to remove hash from url angular app?


It may be the duplicate question. but i have tried so many solutions,no answer work for me. I am using ui-router for angular web app. I am using apache2 server to serve the angular app. I am using Ubuntu. My project code is inside of the folder \var\www\html\myapp here myapp is the my application folder. I have tried the following
1 adding <base href="/myapp/"> to the head tag
2 adding $locationProvider.html5Mode(true); or $locationProvider.html5Mode({ enabled: true, requireBase: false}); (tried with both separately)
3 adding the .htaccess file with the following content

Options +FollowSymLinks

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
</ifModule>

and some other content for .htaccess file which i got from google to serve the path.
I have tried putting .htaccess file inside \var\www\html\ as well as \var\www\html\myapp. It will remove the hash from the url, but when i clicked refresh ,it will show not found. Can anyone please help me.


Solution

  • Try this in .htaccess file under \var\www\html\myapp :

    RewriteEngine On
    RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
    RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
    
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ index.html [L]
    

    In index.html head section :

    <base href="/myapp/">
    

    In app config :

    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
    
    /* Records full path */
    $analyticsProvider.withBase(true);